Nuxtでinjectを利用して関数を共通化する

概要

injectを利用すると関数を共通化することが出来る。

環境

名称	Version
Node	14.10.1
Nuxt	2.14.5
Vue	2.6.12
TypeScript	3.9.7
Vuetify	2.3.10
nuxt-property-decorator	2.8.8

injectの利用方法

共通化する関数を作成する

~/plugins/utils.ts

import { Plugin } from "@nuxt/types";

declare module "vue/types/vue" {
  interface Vue {
    $testInject(testBool: boolean): string;
  }
}

const testInject = (testBool: boolean): string => {
  return testBool ? "○" : "☓"
}

const utilsPlugin: Plugin = (context, inject) => {
  inject("testInject", testInject);
}

export default utilsPlugin;

nuxt.config.tsに読み込みを追加する

plugins: [
  { src: '~/plugins/utils.ts' }
]

使い方

this.$関数名で、実行する事が出来る。

this.$testInject(true);