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

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

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

addImports

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

使用法

import { defineNuxtModule, addImports } 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: 以下のプロパティを持つオブジェクトまたはオブジェクトの配列:

addImportsDir

ディレクトリから Nuxt アプリケーションにインポートを追加します。ディレクトリ内のすべてのファイルを自動的にインポートし、手動でインポートする必要なく 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'))
  },
})

型

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

パラメータ

addImportsSources

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

使用法

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

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

型

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

パラメータ

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