More than 3 years have passed since last update.

Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにする

Last updated at 2020-01-12Posted at 2020-01-12

よく使うコンポーネントは、いちいちimportして使うのは面倒なので、どこからでも呼び出せるようにしたい、

これまでは、pluginsディレクトリにコンポーネント登録用のファイルを置いて登録していたのだけれど、どのコンポーネントを追加したのか忘れてしまい、登録用のファイルを開いて確認する作業が地味に手間だった。

Githubをサーフィンしていたところ、コンポーネントのファイル名に「global」というサフィックスを付けるだけでどこからでも呼び出し可能にするプラグイン（@nuxtjs/global-components）が目に留まったので、試してみたところ非常に便利だったので紹介したい。

使い方は以下のとおり。

@nuxtjs/global-components をインストールする

npm i -D @nuxtjs/global-components

nuxt.config.js

module.exports = {
  ...
  buildModules: [
    '@nuxtjs/global-components'
  ],
...
}

Nuxt v2.9 未満の場合は、devModules が使えないので、modules に登録する。（未検証）

components ディレクトリの中のファイル名に、「global」というサフィックスを付けるだけでOK。

components/
  my-component.vue # importが必要
  my-button.global.vue # グローバルに登録され、どこからも呼び出せる

上記の例の場合、「my-button」というタグがどこでも使用可能になる。

普段、VSCodeを使っているのだけど、エクスプローラーを見ればファイル名ですぐに判断が付くので、非常に快適になった。

また、対象となるディレクトリやサフィックスをカスタマイズすることも可能。
↓ 詳しくはこちら
https://github.com/nuxt-community/global-components

Nuxtがどんどん便利になっていく、もう離れられない。