コンポーネント

Nuxt Kit は、コンポーネントを扱うための一連のユーティリティを提供します。コンポーネントをグローバルまたはローカルに登録したり、コンポーネントをスキャンするディレクトリを追加したりできます。

コンポーネントは、Nuxt アプリケーションの構成要素です。再利用可能な Vue インスタンスであり、ユーザーインターフェースを作成するために使用できます。Nuxt では、components ディレクトリからのコンポーネントがデフォルトで自動的にインポートされます。しかし、別のディレクトリからコンポーネントをインポートする必要がある場合や、必要に応じて選択的にインポートしたい場合、@nuxt/kit は addComponentsDir と addComponent メソッドを提供します。これらのユーティリティを使用すると、ニーズに合わせてコンポーネントの設定をカスタマイズできます。

コンポーネントの注入に関する Vue School のビデオを視聴してください。

`addComponentsDir`

コンポーネントをスキャンして使用時にのみインポートされるディレクトリを登録します。global: true オプションを指定しない限り、これによりコンポーネントがグローバルに登録されることはありません。

使用法

export default defineNuxtModule({
  meta: {
    name: '@nuxt/ui',
    configKey: 'ui',
  },
  setup() {
    addComponentsDir({
      path: resolve('./runtime/components'),
      prefix: 'U',
      pathPrefix: false
    })
  }
})

型

function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

パラメータ

dir 次のプロパティを持つオブジェクト:

プロパティ	型	必須	説明
`path`	`string`	`true`	コンポーネントを含むディレクトリへのパス（絶対または相対）。プロジェクト内のディレクトリを参照するために Nuxt エイリアス（~ または @）を使用したり、`require` に似た npm パッケージパスを直接使用できます。
`pattern`	`string \| string[]`	`false`	指定されたパスに対して実行されるパターンを受け入れます。
`ignore`	`string[]`	`false`	指定されたパスに対して実行される無視パターン。
`prefix`	`string`	`false`	この文字列で一致するすべてのコンポーネントにプレフィックスを付けます。
`pathPrefix`	`boolean`	`false`	コンポーネント名にそのパスをプレフィックスとして付けます。
`enabled`	`boolean`	`false`	`true` に設定すると、このディレクトリのスキャンを無視します。
`prefetch`	`boolean`	`false`	これらのプロパティ（prefetch/preload）は、Lazy プレフィックスを持つコンポーネントが webpack のマジックコメントによってどのように処理されるかを設定するために本番環境で使用されます。詳細は webpack ドキュメントを参照してください。
`preload`	`boolean`	`false`	これらのプロパティ（prefetch/preload）は、Lazy プレフィックスを持つコンポーネントが webpack のマジックコメントによってどのように処理されるかを設定するために本番環境で使用されます。詳細は webpack ドキュメントを参照してください。
`isAsync`	`boolean`	`false`	このフラグは、Lazy プレフィックスを使用するかどうかに関係なく、コンポーネントを非同期で（別のチャンクで）ロードする必要があることを示します。
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)`	`false`	ディレクトリ内で見つかった各コンポーネントに対して呼び出される関数です。コンポーネントオブジェクトを受け取り、コンポーネントオブジェクトまたはコンポーネントオブジェクトに解決されるプロミスを返す必要があります。
`global`	`boolean`	`false`	有効にすると、コンポーネントがグローバルに利用可能になるように登録されます。
`island`	`boolean`	`false`	有効にすると、コンポーネントがアイランドとして登録されます。アイランドについての詳細は `<NuxtIsland/>` コンポーネントの説明を参照してください。
`watch`	`boolean`	`false`	ファイルの追加や削除を含む、指定されたパスの変更を監視します。
`extensions`	`string[]`	`false`	Nuxt ビルダーがサポートする拡張子。
`transpile`	`'auto' \| boolean`	`false`	build.transpile を使用して指定されたパスをトランスパイルします。`'auto'` に設定すると、パスに `node_modules/` が含まれている場合に `transpile: true` が設定されます。

opts

プロパティ	型	必須	説明
`prepend`	`boolean`	`false`	`true` に設定すると、ディレクトリは `push()` の代わりに `unshift()` を使用して配列に追加されます。

`addComponent`

コンポーネントを自動的にインポートするように登録します。

使用法

import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  async setup() {
    const resolver = createResolver(import.meta.url)

    addComponent({
      name: 'NuxtImg',
      filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
    })

    addComponent({
      name: 'NuxtPicture',
      filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
    })
  },
})

型

function addComponent (options: AddComponentOptions): void

パラメータ

options: 次のプロパティを持つオブジェクト:

プロパティ	型	必須	説明
`name`	`string`	`true`	コンポーネント名。
`filePath`	`string`	`true`	コンポーネントへのパス。
`pascalName`	`string`	`false`	パスカルケースのコンポーネント名。指定しない場合、コンポーネント名から生成されます。
`kebabName`	`string`	`false`	ケバブケースのコンポーネント名。指定しない場合、コンポーネント名から生成されます。
`export`	`string`	`false`	名前付きまたはデフォルトのエクスポートを指定します。指定しない場合、`'default'` に設定されます。
`shortPath`	`string`	`false`	コンポーネントへの短いパス。指定しない場合、コンポーネントパスから生成されます。
`chunkName`	`string`	`false`	コンポーネントのチャンク名。指定しない場合、コンポーネント名から生成されます。
`prefetch`	`boolean`	`false`	これらのプロパティ（prefetch/preload）は、Lazy プレフィックスを持つコンポーネントが webpack のマジックコメントによってどのように処理されるかを設定するために本番環境で使用されます。詳細は webpack ドキュメントを参照してください。
`preload`	`boolean`	`false`	これらのプロパティ（prefetch/preload）は、Lazy プレフィックスを持つコンポーネントが webpack のマジックコメントによってどのように処理されるかを設定するために本番環境で使用されます。詳細は webpack ドキュメントを参照してください。
`global`	`boolean`	`false`	有効にすると、コンポーネントがグローバルに利用可能になるように登録されます。
`island`	`boolean`	`false`	有効にすると、コンポーネントがアイランドとして登録されます。アイランドについての詳細は `<NuxtIsland/>` コンポーネントの説明を参照してください。
`mode`	`'client' \| 'server' \| 'all'`	`false`	このオプションは、コンポーネントがクライアント、サーバー、またはその両方でレンダリングされるべきかを示します。デフォルトでは、クライアントとサーバーの両方でレンダリングされます。
`priority`	`number`	`false`	コンポーネントの優先度。同じ名前のコンポーネントが複数ある場合、最も高い優先度のものが使用されます。

例

npm パッケージからコンポーネントを自動インポートしたい場合、コンポーネントがデフォルトではなく名前付きエクスポートである場合、export オプションを使用して指定できます。

import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
    addComponent({
      name: 'MyAutoImportedComponent',
      export: 'MyComponent',
      filePath: 'my-npm-package',
    })
  },
})

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/kit/components