Vue-CLIのグローバルフィルタを別ファイルで定義したい

Vue-CLIで簡単なフィルタを作りました。

main.jsに

Vue
1Vue.filter('TimeAndMinutes_24h', function (value) {
2  var tmpDt = new Date(value);
3  return tmpDt.getHours() + ":" + tmpDt.getMinutes();
4});

でテンプレート内で
{{val.start | TimeAndMinutes_24h}}
とすると入力に「2020-07-30 14:13:30」だったとすれば表示が「14:13」となり要件は満たしています。

しかしこの表示フォーマット以外にもフィルタをいくつか使いたいのですが、main.jsにどんどん追加するのは現実的だとは思えません。
よくある3桁区切り等も通常使うものとして別ファイルで定義して使いまわしたいと考えています。

ですのでmixinsのように別ファイルに定義してimportすれば良いのかな？と思ったんですが、実際のやり方がわかりません。

一応別ファイルとしてfiter.jsを準備して

vue
1export default {
2    filters: {
3        TimeAndMinutes_24h(value) {
4            var tmpDt = new Date(value);
5            return tmpDt.getHours() + ":" + tmpDt.getMinutes();
6        }
7    }
8}
9

main.jsで

vue
1import Ft from './filters/filter.js'
2Vue.filter(Ft);

やVue.useで試してみたんですがそれ自体はエラーにはならないのですが、コンソールにフィルタが見つからないと言われるだけです・・

何らかの方法はありますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

グローバルフィルターの登録方法

グローバルにフィルターを登録するにはfilterIDとfilter functionを渡します。
以下の例ではucやlcがfilterID、無名functionがfilter functionです。

vue
1const toUpperCase = function(value) {
2  return value.toUpperCase();
3}
4const toLowerCase = function(value) {
5  return value.toLowerCase();
6}
7
8Vue.filter('uc', toUpperCase);
9Vue.filter('lc', toLowerCase);

フィルター関数を別ファイルに切り出す書き方

例1

フィルター関数の定義は別ファイルにし、フィルターの登録はmain.jsで行う例です。

./filter/index.js

javascript
1export function toUpperCase(value) {
2  return value.toUpperCase();
3}
4
5export function toLowerCase(value) {
6  return value.toLowerCase();
7}

main.js

import * as filters from "./filter";

Vue.filter('uc', filters.toUpperCase);
Vue.filter('lc', filters.toLowerCase);

例2

フィルター関数の定義とフィルターの登録を別ファイルにし、main.jsでそれを行う例です。

./filter/index.js

javascript
1import Vue from "vue";
2
3Vue.filter('uc', function(value) {
4  return value.toUpperCase();
5});
6
7Vue.filter('lc', function(value) {
8  return value.toLowerCase();
9});