Open7

Nuxt x TypeScript x Nuxt Composition API で共通変数を使いたい

fsefasfsefas

Nuxt Composition APIで共通の関数を定義する方法はたくさん見かけますが、変数に関しての記事がなくて時間を浪費したのでメモ。

結論

できるようになって気づきましたが、vuexとか使用した方が早いです(だから記事がないのか...)。
最終的に手元で動作したのは以下のリンクを組み合わせた書き方。
【Nuxt.js】プロジェクト内共通の定数を定義する
[TypeScript] Nuxt.jsでプロジェクト共通で使う関数や変数を定義する場合はInjectを使う(サンプルコードつき) - Qiita
プラグイン - Nuxt TypeScript
Nuxt.jsでクリーンアーキテクチャ | MoT Lab (Mobility Technologies Engineering Blog)

具体的には、以下のように書く。

plugins/common.ts
import { Plugin } from '@nuxt/types'

const APP_NAME = 'myAppName'

declare module 'vue/types/vue' {
  interface Vue {
    $appName: string
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $appName: string
  }
}

declare module 'vuex/types/index' {
  interface Store<S> {
    $appname: string
  }
}

const constantsPlugin: Plugin = (_context, inject) => {
  inject('appName', APP_NAME)
}

export default commonPlugin

nuxt.config.js(ts)plugins/commonを追加

nuxt.config.ts(色々省略)
  plugins: [
    '@/plugins/axios',
    '@/plugins/common'
  ],

必要な部分だけ抜粋します。

sample.vue
<template>
  <!-- 以下のように取得できる -->
  <div>$appName</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, useContext, useMeta, SetupContext } from '@nuxtjs/composition-api'
export default defineComponent({
  setup (_, context: SetupContext) {
    console.log(context.root.$appName) // ※ Nuxt3からはこの書き方はできません
  }
</script>
fsefasfsefas

以下を参考にいろいろ試したけどうまくいかなかった...