コンポーネント

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 次のプロパティを持つオブジェクト

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

opts

プロパティ	タイプ	必須	説明
`prepend`	`ブール値`	`false`	`true` に設定すると、ディレクトリは `push()` ではなく `unshift()` を使用して配列の先頭に追加されます。

`addComponent`

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

使用方法

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

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  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`	`文字列`	`true`	コンポーネント名。
`filePath`	`文字列`	`true`	コンポーネントへのパス。
`declarationPath`	`文字列`	`false`	コンポーネントの宣言ファイルへのパス。コンポーネントの型テンプレートを生成するために使用されます。指定されていない場合は、`filePath` が代わりに使用されます。
`pascalName`	`文字列`	`false`	パスカルケースのコンポーネント名。指定されていない場合は、コンポーネント名から生成されます。
`kebabName`	`文字列`	`false`	ケバブケースのコンポーネント名。指定されていない場合は、コンポーネント名から生成されます。
`export`	`文字列`	`false`	名前付きまたはデフォルトのエクスポートを指定します。指定されていない場合は、`'default'` に設定されます。
`shortPath`	`文字列`	`false`	コンポーネントへの短いパス。指定されていない場合は、コンポーネントパスから生成されます。
`chunkName`	`文字列`	`false`	コンポーネントのチャンク名。指定されていない場合は、コンポーネント名から生成されます。
`prefetch`	`ブール値`	`false`	これらのプロパティ (prefetch/preload) は、本番環境で、Lazy プレフィックスを持つコンポーネントが webpack のマジックコメントによってどのように処理されるかを設定するために使用されます。詳細については、webpack ドキュメント
`preload`	`ブール値`	`false`	これらのプロパティ (prefetch/preload) は、本番環境で、Lazy プレフィックスを持つコンポーネントが webpack のマジックコメントによってどのように処理されるかを設定するために使用されます。詳細については、webpack ドキュメント
`global`	`ブール値`	`false`	有効にすると、コンポーネントがグローバルに利用できるように登録されます。
`island`	`ブール値`	`false`	有効にすると、コンポーネントがアイランドとして登録されます。アイランドの詳細については、`<NuxtIsland/>` コンポーネントの説明を参照してください。
`モード`	`'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',
    })
  },
})

お役に立ちましたか？

問題を報告またはGitHub でこのページを編集

自動インポート

Nuxt Kit は、自動インポートを扱うのに役立つ一連のユーティリティを提供します。これらの関数を使用すると、独自のユーティリティ、コンポーザブル、Vue API を登録できます。

コンテキスト

Nuxt Kit は、コンテキストを扱うのに役立つ一連のユーティリティを提供します。