components プロパティ

Nuxt v2.13 以上では @nuxt/components モジュールを使ってコンポーネントのスキャンと自動インポートができます。

• 型: Boolean または Array
• デフォルト: false

true またはオブジェクトオプションを設定したとき、Nuxt は @nuxt/components を組み込んでそして pages、layouts （および他のコンポーネント）内でコンポーネントを使用する際には、自動的にインポートされます。

設定

export default {
  // これは自動的に、`~/components` からコンポーネントを読み込みます
  components: true
}

components: true を設定すると、デフォルトでは、~/components ディレクトリが組み込まれます。

しかしながら、スキャンするディレクトリを追加することで、自動検測の動作をカスタマイズすることができます：

export default {
  components: [
    // { path: '~/components' } に相当
    '~/components',
    { path: '~/components/other', extensions: ['vue'] }
  ]
}

パス

各項目は、文字列またはオブジェクトのいずれかです。文字列の値は、{ path }に対するショートカットです。

path

• 必須項目
• 型: String

コンポーネントを含むディレクトリへのパス（絶対または相対）。

Nuxt のエイリアス (~ や @) を使ってプロジェクト内のディレクトリを参照したり、npm パッケージのパスを直接使用することができます（プロジェクト内で require を使用するのと同様です）。

extensions

• 型: Array<string>
• デフォルト:
  • Nuxt ビルダー (builder.supportedExtensions) によって拡張子がサポート済み
  • デフォルトは拡張子 ['vue', 'js'] がサポート、 または ['vue', 'js', 'ts', 'tsx'] は環境次第

例: 複数ファイルコンポーネント構造をサポート

SFC を .js、.vue、.css に分割したい場合は、.vue ファイルのみをスキャンすることも可能です：

| components
---| componentC
------| componentC.vue
------| componentC.js
------| componentC.scss

// nuxt.config.js
export default {
  components: [{ path: '~/components', extensions: ['vue'] }]
}

pattern

• 型: string (glob パターン )
• デフォルト: **/*.${extensions.join(',')}

指定された path において、このパターンにマッチするファイルのみが含まれます。

ignore

• 型: Array
• 要素: string (glob パターン )
• デフォルト: []

指定された path 内のファイルを除外するパターン

prefix

• 型: String
• デフォルト: '' (プリフィックスなし)

マッチするすべてのコンポーネントのプリフィックス

以下の例では、awesome/ ディレクトリ内のコンポーネントの名前に、awesome- / Awesomeというプレフィックスを追加しています。

// nuxt.config.js
export default {
  components: [
    '~/components',
    { path: '~/components/awesome/', prefix: 'awesome' }
  ]
}

| components/
---| awesome/
------| Button.vue
---| Button.vue

<template>
  <div>
    <AwesomeButton>Click on me 🤘</AwesomeButton>
    <button>Click on me</button>
  </div>
</template>

pathPrefix

• 型: Boolean
• デフォルト: true

コンポーネント名の前に、そのパスを付加する。

watch

• 型: Boolean
• デフォルト: true

指定された path を監視して、ファイルの追加や削除などの変更をする。

transpile

• 型: Boolean
• デフォルト: 'auto'

指定された path を build.transpile を使ってトランスパイルする。デフォルト ('auto') では、node_modules/ が path にある場合、transpile: true を設定します。

level

• 型: Number
• デフォルト: 0

レベルは、2つの異なるディレクトリにある同じ名前のコンポーネントの上書きを許可するために使用されます。これは、ユーザーが自分のコンポーネントを上書きできるようにしたいライブラリの作成者や、カスタムテーマの作成者にとって便利です。

export default {
  components: [
    '~/components', // デフォルトレベルは 0
    { path: 'my-theme/components', level: 1 }
  ]
}

~/componentsにあるコンポーネントは、my-theme/components にある同じ名前のコンポーネントを上書きします。値の小さいものが優先されます。

高度

コンポーネントの上書き

level オプションを使ってコンポーネントを上書きする方法があります。これは、モジュールやテーマの作者にとって非常に便利です。

以下の構造を考え：

| node_modules/
---| my-theme/
------| components/
---------| Header.vue
| components/
---| Header.vue

そして、nuxt.config で定義すると：

components: [
  '~/components', // デフォルトレベルは 0
  { path: 'node_modules/my-theme/components', level: 1 }
]

components/Header.vue は、最下層が優先されるので、テーマコンポーネントを上書きします。

ライブラリ作者

tree-shaking とコンポーネントの自動登録機能を備えた Vue コンポーネントライブラリの作成が超簡単になりました✨。

このモジュールは、components:dirs という名前のフックを公開しているので、Nuxtモジュールでのユーザー設定を必要とせずに、ディレクトリリストを簡単に拡張することができます。

以下のようなディレクトリ構造を想像してみてください：

| node_modules/
---| awesome-ui/
------| components/
---------| Alert.vue
---------| Button.vue
------| nuxt.js
| pages/
---| index.vue
| nuxt.config.js

それから、awesome-ui/nuxt.js で、components:dir というフックを使うことができます：

import { join } from 'path'

export default function () {
  this.nuxt.hook('components:dirs', dirs => {
    // ./components の dir をリストに追加する
    dirs.push({
      path: join(__dirname, 'components'),
      prefix: 'awesome'
    })
  })
}

これで完成です。これで、あなたのプロジェクトでは、nuxt.config.js で ui ライブラリを Nuxt モジュールとしてインポートすることができます：

export default {
  buildModules: ['@nuxt/components', 'awesome-ui/nuxt']
}

そして、モジュールのコンポーネント（プレフィックスは awesome- ）を直接使用して、私たちの pages/index.vue を作成します：

<template>
  <div>
    My <AwesomeButton>UI button</AwesomeButton>!
    <awesome-alert>Here's an alert!</awesome-alert>
  </div>
</template>

これは、使用されている場合にのみ自動的にコンポーネントをインポートし、node_modules/awesome-ui/components/ でコンポーネントを更新する際に HMR をサポートします。

次: 作成したawesome-uiモジュールを npm に公開して、他の Nuxters と共有しましょう✨。