【Nuxt.js v2】プロジェクト内共通の定数を定義する

定義の仕方

/plugins/constants.js

定数を定義したpluginを用意し、injectを使用してプロジェクト内で共通化します。

const COLOR_PRIMARY = '#2196F3'
const SITE_DOMAIN = 'kokota_example.com'
const IPA = {
  fe: '基本情報技術者試験',
  ap: '応用情報技術者試験',
  sa: 'システムアーキテクト試験',
  nw: 'ネットワークスペシャリスト試験',
  db: 'データベーススペシャリスト試験',
  pm: 'プロジェクトマネージャ試験'
}

export default (context, inject) => {
  inject('COLOR_PRIMARY', COLOR_PRIMARY)
  inject('SITE_DOMAIN', SITE_DOMAIN)
  inject('IPA', IPA)
}

nuxt.config.js

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

使い方

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

console.log(this.$COLOR_PRIMARY)
// #2196F3

middleware,asyncData,fetchではVueインスタンス生成前なので、引数のcontextから参照できます。contextの分割代入{}で、定数を取得しましょう。($付きの名前になっています。)

// middleware
export default function ({ $IPA }) {
  console.log($IPA.fe)
  // 基本情報技術者試験
}