Nuxt.jsにて特定のコンポーネントを全てのページで使えるようにする

Nuxt.jsでページ内で使いたいコンポーネントがある時componentsオプションを設定すれば可能だが、全てのページで使うのでいちいち設定しなくても共通で使えるようにする方法。

例えばみんな大好きCommonComponentを全てのページで使えるようにしたい場合、下記のようなプラグインを作れば良い。

plugins/common.js

import Vue from 'vue'
import CommonComponent from '../components/CommonComponent.vue'

Vue.component('common', CommonComponent)

あとはこのプラグインをnuxt.config.jsで指定する。

  plugins: [
    '~plugins/common.js'
  ],

これで各ページでいちいちcomponents内にCommonComponentを含めなくても<common></common>を直接全てのページ内に配置することができるようになる。