Open7
Nuxt x TypeScript x Nuxt Composition API で共通変数を使いたい
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>
以下を参考にいろいろ試したけどうまくいかなかった...
-
onGlobalSetup
- GitHubにサンプルのリポジトリへのリンクがあったのでみたけど使い方がわかりません...(該当issue: help: Using onGlobalSetup from custom nuxt module · Issue #406 · nuxt-community/composition-api)
- ワタシニハマダワカラナイ...(Nuxt x Composition API x Hasura x TypeScriptを実装する)
-
defineNuxt*
-
defineNuxtPlugin
で検索しても使ってる記事が全くない
-
-
vue.js : 定数をNUXTに保存する最善の方法は何ですか?
- 独特。できそうな気もするけど今回は不採用。
-
Nuxt - Plugins directory
- template側では問題なく使えるが、JavaScript側でComposition APIが絡んできて参照の仕方がわからない(変数としての定義の仕方)
以下は今後参考になるかも
- 【Nuxt】pluginを用いてグローバルな定数を定義する - Qiita
- Nuxt.js+TypeScriptでプラグインの型定義を作成する | Black Everyday Company
- Vue Composition API + TypeScriptで DI(依存性の注入), DIP(依存性逆転の原則) を実装してみる - Qiita
- Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。 - Qiita
これはすぐに使えそう
Nuxt.jsでpluginを使ってみた(郵便番号検索) | codelikeなブログ