コンポーネント

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

addComponentsDir

コンポーネントをスキャンして、使用された場合にのみインポートされるディレクトリを登録します。 global: trueオプションを指定するまで、これはコンポーネントをグローバルに登録しないことに注意してください。

型

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

interface ComponentsDir {
  path: string
  pattern?: string | string[]
  ignore?: string[]
  prefix?: string
  pathPrefix?: boolean
  enabled?: boolean
  prefetch?: boolean
  preload?: boolean
  isAsync?: boolean
  extendComponent?: (component: Component) => Promise<Component | void> | (Component | void)
  global?: boolean
  island?: boolean
  watch?: boolean
  extensions?: string[]
  transpile?: 'auto' | boolean
}

// You can augment this interface (exported from `@nuxt/schema`) if needed
interface ComponentMeta {
  [key: string]: unknown
}

interface Component {
  pascalName: string
  kebabName: string
  export: string
  filePath: string
  shortPath: string
  chunkName: string
  prefetch: boolean
  preload: boolean
  global?: boolean
  island?: boolean
  mode?: 'client' | 'server' | 'all'
  priority?: number
  meta?: ComponentMeta
}

パラメータ

dir

型: ComponentsDir

必須: true

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

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

opts

必須: false

• prepend (オプション)
  型: boolean
trueに設定すると、ディレクトリはpush()の代わりにunshift()で配列の先頭に追加されます。

addComponent

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

型

async function addComponent (options: AddComponentOptions): void

interface AddComponentOptions {
  name: string,
  filePath: string,
  pascalName?: string,
  kebabName?: string,
  export?: string,
  shortPath?: string,
  chunkName?: string,
  prefetch?: boolean,
  preload?: boolean,
  global?: boolean,
  island?: boolean,
  mode?: 'client' | 'server' | 'all',
  priority?: number,
}

パラメータ

オプション

型: AddComponentOptions

必須: true

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

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