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
$HOGE          //SSR時はthisを省略

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選