Nuxt.js 変数・関数を共通化するinjectを使う

Nuxt.jsでinject関数を使うと変数と関数を共通化し、各ページで使えるようになります。/plugins/に設定ファイルを作り、nuxt.config.jsにコードを追記するだけで使用できます。

1. /plugins/test.js コードを記載

/plugins/test.jsを作成して下記コードを記載します。

const HELLO = 'Hello World!'
const HOGE = 'HOGE'

export default ({}, inject) => {
  inject('HELLO', HELLO)
  inject('HOGE', HOGE)
}

2. nuxt.config.jsを設定

nuxt.config.jsに下記コードを記載します。

export default {
  // ~~~

  plugins: ['~/plugins/test.js']

  // ~~~
}

3. 変数呼び出し

設定が完了したら各ページから下記のように呼び出すことができます。

this.$HELLO    //Hello World!
this.$HOGE    //HOGE
  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note