グローバルなコンポーネント
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>