@nuxt/componentsを使って、コンポーネントのimport文を不要にする

Nuxt.jsの公式ツイッターを見てたら、いい感じのモジュールがあったので、試してみたときの備忘録。

Introducing @nuxt/components ✨

No need to import your components anymore 🎩

✅ Scan and auto import components
✅ Multiple paths with customisable prefixes and patterns
✅ Lazy loading support
✅ Hot replacement
✅ Support for library authorshttps://t.co/lCJ5wySJXQ pic.twitter.com/cnmQvAhG5I

— Nuxt.js (@nuxt_js) May 18, 2020

@nuxt/componentsの主な機能としては

• 自動でコンポーネントを探してインポートできるようにしてくれる
• Lazy loadingもサポートしてて、動的にインポートもできる
• Hot reloadingにも対応

これを使うだけで、

• コンポーネントのimport文を書かなくて良くなる
• リネームしても修正しなくて良くなる
• 削除しても修正しなくて良くなる

と、いいことづくし。。

コンポーネントが多くなると、リファクタも辛くなってくるんので助かる。。(´ω｀)

インストール

Nuxt 2.13以上 or nuxt-edge利用時

nuxt.config.jsのcomponentsを設定するだけ！
(Nuxtのv2.13はもうすぐ出るらしい。)

// nuxt.config.js
export default {
  components: true
}

Nuxt 2.10以上

記事を書いてる時点だとNuxt 2.12.xなので、こちら。

まずは、パッケージをインストール

$ npm install --save-dev @nuxt/components

インストールしたら、nuxt.config.jsのbuildModulesに追加。

export default {
  buildModules: [
    // TODO: Remove when upgrading to nuxt 2.13+
    '@nuxt/components'
  ]
}

これでOK

使い方

使い方は簡単。

components/ComponentFoo.vueというコンポーネントを作ったら、そのまま書けばOK！
自動でインポートしてくれてるので使えるように(´ω｀)

<template>
  <ComponentFoo />
</template>

動的インポート(Lazy Loading)

こんな感じに書かれてて、Lazyプレフィックスをつけるだけで、動的インポートになる。

To make a component imported dynamically (lazy loaded), all you need is adding a Lazy prefix in your templates.

<template>
  <LazyComponentFoo v-if="foo" />
</template>

すごく簡単に導入できて、コード量が減る。最高(´ω｀)

以上!!