【Nuxt】pluginを用いてグローバルな定数を定義する

はじめに

NuxtでSPAの開発をしていたときのある日の出来事

先輩「ページのパスは定数ファイルかなにかに一箇所にまとめて、どこからでもその定数呼び出せるようにしておいて」

ワイ「おかのしたー」

ｶﾀｶﾀｶ･･･ん？Nuxtでグローバルな定数の定義ってどうやるんだ？

こんなことがあったので、Nuxt.jsでルーティングのパスとかをconfigファイル（Rubyでいうconfig/initializers/constants.rb）みたなものを作成して、そこに定数として定義する方法を調べてやってみました。

参考

https://jp.vuejs.org/v2/cookbook/adding-instance-properties.html
https://qiita.com/waterada/items/9ae9d977a543bda1214f

ざっくりやり方

\plugins配下に定数ファイルを作成

urls.js

import Vue from 'vue'

Vue.prototype.$urls = {
  // トップ画面
  top: '/',
  // メッセージ画面
  message: '/message',
  // お知らせ画面
 information: '/information',
  // 設定画面
  settings: '/settings',
  // エラー画面
  error: '/error',

}

そしてnuxt.config.jsに以下の内容を追記

nuxt.config.js

// ～～～上記省略～～～

  plugins: [
    '~/plugins/urls',
  ],

これで全vueコンポーネントで

this.$urls.message // '/message'

といった感じで、先程作ったpluginから定数を引っ張り出すことができるようになりました。

初投稿なので至らない点だらけではありますが、誰かの助けになれば幸いです。
また、間違っている点等ありましたら、コメントいただけるとありがたいです。

以上でーす！