nuxtでglobal変数を定義する

2022/2/11Highneeds

はじめに

nuxtで毎回同じ変数を定義している場合、1つにまとめたくなります。そういった際にglobal変数はとても便利です。nuxt.config.jsやSSR時、CSR時にも使える方法をご説明します。

SSR時とは？

SSR時はpageのasyncDataで使う際に使用します。コードで表すと下記の通りです。

asyncData($config) {
  console.log($config.HOGE) // SSRなのでprivateで宣言したほうも呼べる
  console.log($config.HOGE)
}

CSR時とは？

CSR時はpageのmountedにあたる部分です。コードで表すと下記の通りです。

mounted() {
  console.log(this.$config.HOGE)  // CSRなのでpublicで宣言した方しか呼べない
}

定義する

/plugins/ or store/plugins/に任意のjsファイルを作成します。
今回「constants.js」としておきます。

/plugins/constants.js or store/plugins/constants.jsに定義したいものを書きます。

const SITE_DOMAIN = 'https://highneeds.jp'

nuxt.config.jsで読み込み

export default {
  plugins: [
    { src: '/store/plugins/constants.js' }
  ]
}

読み込み

後はプロジェクト内の各ページで、以下のように$<定数名>で参照できます。

console.log(this.$SITE_DOMAIN)

nuxt.config.jsでglobal変数を使用する

上記のやり方ではnuxtにglobal変数として使用できません。nuxt.config.jsでglobal変数を定義する方法をここからは解説します。

Nuxtv2.13以降の場合

Nuxtv2.13以降なら、パッケージをインストールくる必要もなく、デフォルト環境で変数定義できます。
@nuxtjs/dotenvを使用しない
.envファイルを作成し、nuxt.config.jsにpublicRuntimeConfigとprivateRuntimeConfigを定義するだけ。

BASE_URL=http://localhost:8000
API_URL=http://localhost:8888
SECRET_KEY=test

nuxt.config.js

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'http://locahost:3000',
    apiURL: process.env.API_URL || 'http://localhost:3333',
  },
  privateRuntimeConfig: {
    secret: process.env.SECRET_KEY,
  }
}

変数を使用する

どこからでも読み込みができます。

export default function ({ $config }) {
 consle.log($config.baseURL)
}

Nuxtv2.13以降でない場合

dotenvをインストールしてきます。

npm install dotenv --save

.envを作成

touch .env

BROWSER_BASE_URL=https://highneeds.jp

使用する

以下で使用可能になります。

process.env.BROWSER_BASE_URL

参考文献

初出: https://highneeds.jp/wordpress/194/