nuxt.js で異なるコンポーネントから呼び出せる共有の関数を作る

injectを使って共有ロジックを定義する。

サンプル

plugins/logic-sample.ts

import { Plugin } from '@nuxt/types'

declare module 'vue/types/vue' {
  interface Vue {
    $logicSample(message: string): void
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $logicSample(message: string): void
  }
}

declare module 'vuex/types/index' {
  interface Store<S> {
    $logicSample(message: string): void
  }
}

const myPlugin: Plugin = (_context, inject) => {
  inject('logicSample', (message: string) => console.log(message))
}

export default myPlugin

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

export default Vue.extend({
  asyncData(context){
    context.app.$logicSample('works in asyncData')
  }
})
</script>