Vue3用のFilters

filter 関数の定義

よく使う filter 関数の円表示、日付　フォーマット、改行コードを br に変換を買いてみ

filters.ts

import Vue from 'vue';

import dayjs from 'dayjs';

export const currencyJPY = (value: number): string => {
  return `￥${value.toLocaleString()}`;
};

export const formatDate = (date: string): string => {
  return dayjs(date).format('YYYY年MM月DD日');
};

export const nl2br = (text: string): string => {
  if (!text) {
    return '';
  }
  text = text.replace(/\r\n/g, '<br>');
  text = text.replace(/(\n|\r)/g, '<br>');
  return text;
};

Vue.prototype.$filters = {
  currencyJPY,
  formatDate,
  nl2br
};

型定義

vue-filters-type.d.ts

import { currencyJPY, formatDate, nl2br } from '@/plugins/filters';

interface Filters {
  currencyJPY: typeof currencyJPY;
  formatUnixDate: typeof formatDate;
  nl2br: typeof nl2br;
}

declare module 'vue/types/vue' {
  interface Vue {
    $filters: Filters;
  }
}

使用する側は ↓ みたいで型チェックも OK！

<template>
  <div>
		価格: {{ $filters.currencyJPY(price) }}
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
		return {
			price: 1000
		}
  }
});

</script>