グローバルなコンポーネント

Vue でのグローバルコンポーネントの登録はVue.componentをマウント前に実行することです。ただこれ、 NuxtJS ではどうすればいいのか。

プラグイン

これにはプラグインを使います。プラグインの目的は NuxtJS アプリがマウントされる前Vueを使って行いたい処理を実行することです。

これにより例えば、

  • Vue.component
  • Vue.directive
  • Vue.mixin

などによる初期設定などができます。

グローバルコンポーネント登録

Vue.componentを使って登録処理を行うようなプラグイン(ただの.js)ファイルを作ります。このような感じで良いと思います。

import AComponent from './path/to/a-component.vue';

Vue.component('a-component', AComponent);

これをルートからplugins/global-components.jsとなるように置きました。

あとはこれを NuxtJS が読めるようにするだけです。

plugins セクション

nuxt.config.jsの設定にpluginsというセクションを追加します。これにはプラグインファイルへのパスとなる文字列の配列を置きます。またここには、 NuxtJS 固有のパスルールが適用できるので、~~~などのエイリアスを使ってパスを指定できます。

上記で作ったプラグインを登録するには例えばこのようになります。

export default {
  /* ... */
  plugins: [
    '~/plugins/global-components.js'
  ],
  /* ... */
}

無事使えるようになっていれば完了です。

<template>
  <a-component />
</template>