Nuxtでコンポーネントをグローバルに使いたい。
意外と記事が出てこない。
ファイルの指定の仕方忘れてる。
というわけで、備忘録的な感じで書きます。
#環境
@nuxt/cli v2.11.0
#事前準備
↓こいつをグローバルに使いたい...
<!-- 子コンポーネント -->
<template>
<button>クリック</button>
</template>
<script>
export default {};
</script>
↓このままでは、importしてないので使えません。
<!-- 親コンポーネント -->
<template>
<div class="MainPage">
<子コンポーネント />
</div>
</template>
<script>
export default {}
</script>
#やり方
簡単です。
pagesフォルダとかと同じ階層にある
pluginsフォルダにcomponents.jsファイルを作ります(ファイル名は任意)
そこで下記のように書きます。
import Vue from 'vue'
//componentsファイルにあるグローバルにしたいコンポーネントをimport
import Button from '~/components/Btn'
//それを今回は'Button'というコンポーネント名で設定。
Vue.component('Button', Button)
そしてこの.jsファイルをnuxt.config.jsのpluginsに設定してあげます。
plugins: [
'~/plugins/components.js'
],
終わり!
あとは好きな時に使うだけです。
<template>
<div class="MainPage">
<Button /> <!-- さっき設定したコンポーネントが使える -->
</div>
</template>
<script>
export default {
}
</script>
ちゃんとコンポーネントがグローバルに呼び出されています。
※デフォルトで全てに呼び出す設定なので、すべてのページに読み込まれます。
普通コンポーネントは部品として使うため、importすべきとのこと。
by凄腕エンジニア
##こんな便利なものもあるみたいです。
【Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにする】
https://qiita.com/bagooon/items/2d1485f418e6523a7b4d