Nuxt/Componentsモジュールを使ってみた

Nuxt/componentsとは

解説によれば、「importなどしなくても自動的にコンポーネントを読み込んでくれる」モジュールです。
便利そうなので早速使ってみましょう。

Nuxtインストールとモジュールのインストール

# Nuxt
yarn create nuxt-app <project-name>

# Nuxt/Components
yarn add --dev @nuxt/components

nuxt.config.jsに追加

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

※TypeScript使用している方は、すでに@nuxt/typescript-buildモジュールが入っていると思うので消さないようにご注意を

※Nuxt v2.13はまだ(2020/05/18現在)リリースされていないので大丈夫ですが、
今後は標準でこのモジュールがインストールされるようなので、アップグレードの際はご注意を。

Hello,world!してみる

index.vue

<template>
  <div class="container"><HelloWorld /></div>
</template>

index.vueに上記のようにテンプレートブロックだけ書きます。普通はscriptブロック内でimportしないと使えませんが、今回は書きません。

カスタムタグに合わせてHelloWorld.vueという名前のファイルをcomponentsに入れてみましょう。

/components/HelloWorld.vue

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

HelloWorld.vueもかなり簡単に書いてみました。やはりテンプレートブロックしか書きません。

結果

できました！
importしていないにも関わらず自動的にカスタムタグと同じvueファイルを読み取っています！

終わりに

最速紹介ということで使い方だけ紹介しましたがとても便利です
早く安定版標準になってほしいものです。