自動インポート

アプリケーション全体で明示的にインポートすることなく使用できる、Nuxt自動インポートヘルパー関数、コンポーザブル、およびVue APIです。ディレクトリ構造に基づいて、すべてのNuxtアプリケーションは、独自のコンポーザブルとプラグインの自動インポートも使用できます。Nuxt Kitを使用すると、独自の自動インポートを追加することもできます。addImportsとaddImportsDirを使用すると、Nuxtアプリケーションにインポートを追加できます。addImportsSourcesを使用すると、サードパーティパッケージからリストされたインポートをNuxtアプリケーションに追加できます。

これらの関数は、独自のユーティリティ、コンポーザブル、およびVue APIを登録するためのもので、ページ、コンポーネント、プラグインについては、それぞれのセクションを参照してください。ページ、コンポーネント、プラグイン。

アプリケーション全体で明示的にインポートすることなく使用できる、Nuxt自動インポートヘルパー関数、コンポーザブル、およびVue APIです。ディレクトリ構造に基づいて、すべてのNuxtアプリケーションは、独自のコンポーザブルとプラグインの自動インポートも使用できます。コンポーザブルまたはプラグインはこれらの関数を使用できます。

自動インポートNuxt Kitユーティリティに関するVue Schoolのビデオをご覧ください。

`addImports`

Nuxtアプリケーションにインポートを追加します。これにより、手動でインポートする必要なく、Nuxtアプリケーションでインポートを使用できるようになります。

型

function addImports (imports: Import | Import[]): void

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

パラメーター

`imports`

型: Import | Import[]

必須: true

次のプロパティを持つオブジェクトまたはオブジェクトの配列

from (必須)
型: string
インポート元のモジュール指定子。
priority (オプション)
型: number
デフォルト: 1
インポートの優先度。複数のインポートが同じ名前を持つ場合、優先度が最も高いものが使用されます。
disabled (オプション)
型: boolean
このインポートが無効になっているかどうか。
meta (オプション)
型: object
インポートのメタデータ。
meta.description (オプション)
型: string
インポートの簡単な説明。
meta.docsUrl (オプション)
型: string
ドキュメントへのURL。
meta[key] (オプション)
型: any
追加のメタデータ。
type (オプション)
型: boolean
このインポートが純粋な型インポートかどうか。
typeFrom (オプション)
型: string
型宣言を生成する際のfromとしてこれを使用します。
name (必須)
型: string
検出されるインポート名。
as (オプション)
型: string
この名前としてインポートします。

例

// https://github.com/pi0/storyblok-nuxt
import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const names = [
      "useStoryblok",
      "useStoryblokApi",
      "useStoryblokBridge",
      "renderRichText",
      "RichTextSchema"
    ];

    names.forEach((name) =>
      addImports({ name, as: name, from: "@storyblok/vue" })
    );
  }
})

`addImportsDir`

ディレクトリからNuxtアプリケーションにインポートを追加します。ディレクトリからすべてのファイルを自動的にインポートし、手動でインポートする必要なく、Nuxtアプリケーションで使用できるようにします。

型

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

パラメーター

`dirs`

型: string | string[]

必須: true

インポート元のディレクトリへのパスを表す文字列または文字列の配列。

`options`

型: { prepend?: boolean }

デフォルト: {}

インポートに渡すオプション。prependがtrueに設定されている場合、インポートはインポートのリストの先頭に追加されます。

例

// https://github.com/vueuse/motion/tree/main/src/nuxt
import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@vueuse/motion',
    configKey: 'motion',
  },
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('./runtime/composables'))
  },
})

`addImportsSources`

リストされたインポートをNuxtアプリケーションに追加します。

型

function addImportsSources (importSources: ImportSource | ImportSource[]): void

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

interface ImportSource extends Import {
  imports: (PresetImport | ImportSource)[]
}

type PresetImport = Omit<Import, 'from'> | string | [name: string, as?: string, from?: string]

パラメーター

`importSources`

型: ImportSource | ImportSource[]

必須: true

次のプロパティを持つオブジェクトまたはオブジェクトの配列

imports (必須)
型: PresetImport | ImportSource[]
必須: true
インポート名、インポートオブジェクト、またはインポートソースとなるオブジェクトまたはオブジェクトの配列。
from (必須)
型: string
インポート元のモジュール指定子。
priority (オプション)
型: number
デフォルト: 1
インポートの優先度。複数のインポートが同じ名前を持つ場合、優先度が最も高いものが使用されます。
disabled (オプション)
型: boolean
このインポートが無効になっているかどうか。
meta (オプション)
型: object
インポートのメタデータ。
meta.description (オプション)
型: string
インポートの簡単な説明。
meta.docsUrl (オプション)
型: string
ドキュメントへのURL。
meta[key] (オプション)
型: any
追加のメタデータ。
type (オプション)
型: boolean
このインポートが純粋な型インポートかどうか。
typeFrom (オプション)
型: string
型宣言を生成する際のfromとしてこれを使用します。
name (必須)
型: string
検出されるインポート名。
as (オプション)
型: string
この名前としてインポートします。

例

// https://github.com/elk-zone/elk
import { defineNuxtModule, addImportsSources } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // add imports from h3 to make them autoimported
    addImportsSources({
      from: 'h3',
      imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
    })
  }
})

互換性

Nuxt Kitは、異なるNuxtバージョンとのモジュールの互換性をチェックするのに役立つユーティリティを提供します。

コンポーネント

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