自動インポート

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

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

Nuxt Kit を使用すると、独自の自動インポートを追加することもできます。addImports と addImportsDir を使用すると、Nuxt アプリケーションにインポートを追加できます。addImportsSources を使用すると、サードパーティパッケージからリストされたインポートを Nuxt アプリケーションに追加できます。

これらのユーティリティは、unimportによって提供される、Nuxt で使用されている基盤となる自動インポートメカニズムによって動作します。

これらの関数は、独自のユーティリティ、コンポーザブル、Vue API を登録するために設計されています。ページ、コンポーネント、プラグインについては、特定のセクションを参照してください: ページ、コンポーネント、プラグイン。
Vue School の自動インポート Nuxt Kit ユーティリティに関するビデオを見る。

addImports

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

使用方法

import { addImports, defineNuxtModule } 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' }),
    )
  },
})

タイプ

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

パラメーター

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

プロパティタイプ必須説明
name文字列true検出されるインポート名。
from文字列trueインポート元のモジュール指定子。
prioritynumberfalseインポートの優先順位。複数のインポートが同じ名前を持つ場合、最も優先順位の高いものが使用されます。
disabledブール値falseこのインポートが無効になっている場合。
metaRecord<string, any>falseインポートのメタデータ。
タイプブール値falseこのインポートが純粋な型インポートである場合。
typeFrom文字列false型宣言を生成する際に、これを from 値として使用します。
as文字列falseこの名前でインポートします。

addImportsDir

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

使用方法

import { addImportsDir, createResolver, defineNuxtModule } 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'))
  },
})

タイプ

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

パラメーター

プロパティタイプ必須説明
dirsstring | string[]trueインポート元のディレクトリへのパスを示す文字列または文字列の配列。
options{ prepend?: boolean }falseインポートに渡すオプション。prepend が true に設定されている場合、インポートはインポートリストの先頭に追加されます。

addImportsSources

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

使用方法

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

export default defineNuxtModule({
  setup () {
    addImportsSources({
      from: 'h3',
      imports: [
        'defineEventHandler',
        'getQuery',
        'getRouterParams',
        'readBody',
        'sendRedirect',
      ],
    })
  },
})

タイプ

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

パラメーター

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

プロパティタイプ必須説明
from文字列trueインポート元のモジュール指定子。
importsPresetImport | ImportSource[]trueインポート名、インポートオブジェクト、またはインポートソースになりうるオブジェクトまたはオブジェクトの配列。