Nuxt.config.jsのpluginsを使ってコンポーネントをグローバルで使う方法

2021年7月14日Vue.js

Nuxt.config.jsのpluginsを使ってコンポーネントをグローバルで使う方法を紹介します。
pluginsを使うと、importしたりcomponentsに登録する必要がなくなってコードがスッキリします。

Nuxt.config.jsのpluginsを使ってコンポーネントをグローバルで使う方法

pluginsプロパティは、アプリがマウントされる前にロードされます。
通常のVueでmain.jsに設定するような内容を記載します。

Nuxtアプリを作成すると、自動的にpluginsフォルダが作成されます。
その中に、たとえばcore-components.jsというファイルを作成します。このファイル名はなんでも大丈夫です。
いろんな場所で使っているコンポーネントがあればそれらをこのファイルにインポートします。
そして、nuxt.config.jsのpluginsに登録すればグローバルで使えるようになります。
下が例です。

グローバルコンポーネントとして使う

plugins/core-components.jsには次のように記述します。

import Vue from 'vue'

import Input from '@/components/UI/Input'
import Button from '@/components/UI/Button'

Vue.component('Input', Input)
Vue.component('Button', Button)

必ず最初にVueを’vue’からインポートしておきます。
グローバルで使いたいコンポーネントをインポートします。

そして、Vueのcomponentとして登録します。

nuxt.config.jsのpluginsを設定する

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~plugins/core-components.js'
  ],

上のように設定すればOKです。

上に登録したコンポーネントは各個別のファイルでインポートする必要はありません。

よって
各ファイルのscriptに記述している次の記述は不要になるので削除します。

import Input from '@/components/UI/Input'
import Button from '@/components/UI/Button'

  components: {
    Input,
    Button,
  },