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)
}

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

export default {
  // ～～～

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

  // ～～～
}

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

this.$HELLO    //Hello World!
this.$HOGE     //HOGE
$HOGE          //SSR時はthisを省略

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

Nuxt3 多言語対応サイトを作る

Nuxt3 URLをスラッシュ付きに統一する

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

Nuxt.js ディレクトリ構成を理解する

Nuxt.jsにGoogle Adsenseの広告を好きなサイズで設置する

AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中

ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール第2弾が開催