【Nuxt3】使えなくなったinjectの代用品を3つ紹介

Nuxt v3の調査、injectの代わり編です。

injectというのは、いや僕もあんまり分かってないんですけど、v2に置いては自分が作った変数を「this.$db」みたいにグローバルに設定できる機能でした。

だいたいいつも設定部分を隔離していたのですげー重宝していたんですが、どうもv3でダメになったっぽい。レガシー仕様だとかなんだか文句言われました。

というわけでこいつの代わりに使えそうなものを探していきます。

このページの目次

1 injectとは何だったのか
2 代用品①app.config.ts
3 代用品②provide
4 代用品③composables
5 まとめ

injectとは何だったのか

実は何だったのかよく分かってなかったのですが、v2時代にプラグインとしてこの↓ようなコードを書いておくと、


const db = require('./db.json')

export default ({ app, isDev }, inject) => {
  inject('db', db)
}

全てのコンポーネントで、templateからは「$db」、scriptからは「this.$db」としてアクセスできていたものでした。グローバルな変数の定義、とか呼ぶんですかね。

余談ですが、なぜ別のJSONに中身があるのかというとnuxt.configからも参照したいからです。 injectのままだとnuxt.configからは参照できません。 JSONの代わりにexport defaultのjsファイルでも同じ動作になっていました。

代用品①app.config.ts

いかにも設定ファイルっぽいapp.config.ts。

プロジェクトルートにapp.config.tsというファイルを作り、こんな↓風に書くようです。


export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

場所と名前があっていれば自動インポートされます。

呼び出し側はこんな↓感じに書くそう。


const appConfig = useAppConfig()

console.log(appConfig.theme)

ただ、このやり方だとnuxt.configから呼び出せないようで、これを解決するために同様にJSONファイルに値を定義して、app.config.tsをこんな↓風に書くとうまくいきました。


import db from './db.json'

export default defineAppConfig(db)

nuxt.configからはJSONを読み込みます。

欠点として、script setupじゃなくてdefineNuxtComponentの方でコンポーネントのスクリプトを定義している場合、head()内でのアクセスがちょっと特殊でした。まずサーバサイドでは未定義で、クライアントサイドだと値が入ってます。クライアントサイドでもuseAppConfigだとProxy状態で、headの引数nuxtAppの中に「nuxtApp._appConfig」として入っていました。

この欠点は次の2つにはなかったのでapp.config.tsを使うメリットはあまりない？名前がいかにも設定ファイルでルートにあるので見栄えがいい？

代用品②provide

公式のProviding Helpersというやつです。 injectでこう↓書いていたものを、


export default ({ app, isDev }, inject) => {
  inject('db', {
    primaryColor: '#ababab'
  })
}

こう↓書き換えます。


export default defineNuxtPlugin(() => {
  return {
    provide: {
      db: { primaryColor: '#ababab' }
    }
  }
})

pluginsフォルダに上記コードのファイルを入れておくと自動でインポートしてくれます。

呼び出し側はこんな↓感じ。


const { $db } = useNuxtApp()

console.log($db.primaryColor)

かなりinjectに近いですね。

欠点？として、defineNuxtPluginの中で、useNuxtAppからの$i18nにアクセスできませんでした。次のcomposablesからはアクセスできたので、処理内容によったらprovideではダメなものがありそう。

代用品③composables

あまりよく分かっていないcomposablesという機能。

プロジェクトルートにcomposablesというフォルダを作ってその中に定義します。自動インポート対応。

こんな↓風にコードを書きます。


export const db = {
  primaryColor: '#ababab'
}

呼び出し側はtemplateからもscriptからも「db」のみでいけて、「useAppConfig()」みたいに呼び出し不要なのでお手軽。

だいぶ面白い機能だなと思っていろいろ試したので良かったら見てください。

解説記事

【Nuxt3】composablesがめっちゃ強いかもしれない

まとめ

injectの代わりになりそうなものを3つ紹介しました。

個人的には、v2でinjectしていたものはほぼどのページからも頻繁にアクセスするものだったので、呼び出し不要のcomposablesが便利そうに見えますね。このあたりは実際のプロジェクトで動かしてみてまた感想を。

以上、WordPressからお届けしました！

Nuxt.js v3の目次