翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

components プロパティ

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

この機能は、Nuxt 2.10 - 2.12で使用することができます。手動でインストールして、@nuxt/components を nuxt.config 内の buildModules に追加するだけです。
  • 型: Boolean または Array
  • デフォルト: false

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

詳しい使い方は、自動検索の有効 ドキュメント を参照してください。

設定

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

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

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

nuxt.config.js
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

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

ignore

指定された 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 と共有しましょう✨。

このページをGitHubで編集する 更新日 Mon, Feb 28, 2022