プラグインを自作する

①プラグインを作成する

プロジェクト/src/plugins/MomentPlugin.ts

import Moment from "moment";

export const MomentPlugin = {
  install: (_Vue: any, options: any) => {
    // globalPropertiesは、Vue 2.x における Vue.prototype
    _Vue.config.globalProperties.$formatDate = (dateString: string) => {
      return Moment(dateString).format(
        options && options.format ? options.format : "YYYY-MM-DD"
      );
    };
  },
};
export { MomentPlugin as default };

②main.tsに定義する

プロジェクト/src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import MomentPlugin from "/@/plugins/MomentPlugin";

createApp(App)
  .use(MomentPlugin, {
    format: "YYYY年MM月DD日",
  })
  .mount("#app");

③プラグインを使う

<template>
  <div class="home">
    <p>{{ $formatDate("20210409") }}</p>
  </div>
</template>