[Nuxt]pluginsを使って、グローバルにコンポーネントを追加する

2019年6月7日ITnuxt, vue

Nuxtのpluginsを使えば、簡単にグローバルにコンポーネントを登録できました。

例えば、下記のようなAppButtonコンポーネントがあったら、

AppButton.vue



使用する時いちいちimportしていたのですが、

index.vue



VueのコンポーネントにAppButtonを登録して、Nuxtのpluginsディレクトリに配置し、nuxt.config.jsにパスを書くと、、、

plugins/components.js

import Vue from 'vue'

import AppButton from '@/components/UI/AppButton'

Vue.component('AppButton', AppButton)

nuxt.config.js

-----
 /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~plugins/components.js'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  -----

グローバルに登録されているので、都度呼び出さずにコンポーネントが使用できます。

index.vue



コンポーネントの粒度によってはかなりスッキリするのでは?と思います。

(ちゃんと管理しないとグローバルに登録したけど、未使用のコンポーネントとかが出てきそうですが)

以上になります。

スポンサーリンク

Posted by nobuhiro harada