【Nuxt.js】グローバルなコンポーネントの設定

5084 ワード
nuxt vue-cli Vue.js JavaScript nuxt.js JavaScript テキストリンク

Nuxtでコンポーネントをグローバルに使いたい。
意外と記事が出てこない。
ファイルの指定の仕方忘れてる。

というわけで、備忘録的な感じで書きます。

環境

@nuxt/cli v2.11.0

事前準備

↓こいつをグローバルに使いたい...

components/Btn.vue
<!-- 子コンポーネント -->
<template>
  <button>クリック</button>
</template>

<script>
export default {};
</script>

　

↓このままでは、importしてないので使えません。

pages/index.vue
<!-- 親コンポーネント -->
<template>
  <div class="MainPage">
    <子コンポーネント />
  </div>
</template>

<script>
export default {}
</script>

やり方

簡単です。
pagesフォルダとかと同じ階層にある
pluginsフォルダにcomponents.jsファイルを作ります(ファイル名は任意)

そこで下記のように書きます。

plugins/components.js
import Vue from 'vue'

//componentsファイルにあるグローバルにしたいコンポーネントをimport
import Button from '~/components/Btn'
//それを今回は'Button'というコンポーネント名で設定。
Vue.component('Button', Button)

そしてこの.jsファイルをnuxt.config.jsのpluginsに設定してあげます。

nuxt.config.js
  plugins: [
    '~/plugins/components.js'
  ],

終わり！

あとは好きな時に使うだけです。

pages/index.vue
<template>
  <div class="MainPage">
    <Button /> <!-- さっき設定したコンポーネントが使える -->
  </div>
</template>

<script>
export default {
}
</script>

ちゃんとコンポーネントがグローバルに呼び出されています。

※デフォルトで全てに呼び出す設定なので、すべてのページに読み込まれます。
普通コンポーネントは部品として使うため、importすべきとのこと。
by凄腕エンジニア

こんな便利なものもあるみたいです。

【Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにする】
https://qiita.com/bagooon/items/2d1485f418e6523a7b4d