モジュール
Nuxt Kit は、モジュールの作成と使用に役立つユーティリティのセットを提供します。これらのユーティリティを使用して、独自のモジュールを作成したり、既存のモジュールを再利用したりできます。
モジュールは Nuxt の構成要素です。Kit は、モジュールの作成と使用に役立つユーティリティのセットを提供します。これらのユーティリティを使用して、独自のモジュールを作成したり、既存のモジュールを再利用したりできます。たとえば、defineNuxtModule 関数を使用してモジュールを定義し、installModule 関数を使用してモジュールをプログラムでインストールできます。
defineNuxtModule
Nuxt モジュールを定義します。デフォルト値とユーザーが提供するオプションを自動的にマージし、提供されているフックをインストールし、完全に制御するためにオプションのセットアップ関数を呼び出します。
型
function defineNuxtModule<OptionsT extends ModuleOptions> (definition: ModuleDefinition<OptionsT> | NuxtModule<OptionsT>): NuxtModule<OptionsT>
type ModuleOptions = Record<string, any>
interface ModuleDefinition<T extends ModuleOptions = ModuleOptions> {
meta?: ModuleMeta
defaults?: T | ((nuxt: Nuxt) => T)
schema?: T
hooks?: Partial<NuxtHooks>
setup?: (this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void | false | ModuleSetupReturn>
}
interface NuxtModule<T extends ModuleOptions = ModuleOptions> {
(this: void, inlineOptions: T, nuxt: Nuxt): Awaitable<void | false | ModuleSetupReturn>
getOptions?: (inlineOptions?: T, nuxt?: Nuxt) => Promise<T>
getMeta?: () => Promise<ModuleMeta>
}
interface ModuleSetupReturn {
timings?: {
setup?: number
[key: string]: number | undefined
}
}
interface ModuleMeta {
name?: string
version?: string
configKey?: string
compatibility?: NuxtCompatibility
[key: string]: unknown
}
パラメータ
definition
**型**: ModuleDefinition<T> | NuxtModule<T>
**必須**: true
モジュール定義オブジェクトまたはモジュール関数。
meta(オプション)
**型**:ModuleMeta
モジュールのメタデータ。モジュール名、バージョン、設定キー、および互換性を定義します。defaults(オプション)
**型**:T | ((nuxt: Nuxt) => T)
モジュールのデフォルトオプション。関数が提供された場合、最初の引数として Nuxt インスタンスを使用して呼び出されます。schema(オプション)
**型**:T
モジュールオプションのスキーマ。提供された場合、オプションはスキーマに適用されます。hooks(オプション)
**型**:Partial<NuxtHooks>
モジュールにインストールされるフック。提供された場合、モジュールはフックをインストールします。setup(オプション)
**型**:(this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void | false | ModuleSetupReturn>
モジュールのセットアップ関数。提供された場合、モジュールはセットアップ関数を呼び出します。
例
// https://github.com/nuxt/starter/tree/module
import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
meta: {
name: 'my-module',
configKey: 'myModule'
},
defaults: {
test: 123
},
setup (options, nuxt) {
nuxt.hook('modules:done', () => {
console.log('My module is ready with current test option: ', options.test)
})
}
})
installModule
指定された Nuxt モジュールをプログラムでインストールします。これは、モジュールが他のモジュールに依存している場合に役立ちます。モジュールオプションをオブジェクトとして inlineOptions に渡すことができ、それらはモジュールの setup 関数に渡されます。
型
async function installModule (moduleToInstall: string | NuxtModule, inlineOptions?: any, nuxt?: Nuxt)
パラメータ
moduleToInstall
**型**: string | NuxtModule
**必須**: true
インストールするモジュール。モジュール名を含む文字列またはモジュールオブジェクト自体のいずれかです。
inlineOptions
**型**: any
**デフォルト**: {}
モジュールの setup 関数に渡されるモジュールオプションを含むオブジェクト。
nuxt
**型**: Nuxt
**デフォルト**: useNuxt()
Nuxt インスタンス。提供されない場合、useNuxt() 呼び出しを介してコンテキストから取得されます。
例
import { defineNuxtModule, installModule } from '@nuxt/kit'
export default defineNuxtModule({
async setup (options, nuxt) {
// will install @nuxtjs/fontaine with Roboto font and Impact fallback
await installModule('@nuxtjs/fontaine', {
// module configuration
fonts: [
{
family: 'Roboto',
fallbacks: ['Impact'],
fallbackName: 'fallback-a',
}
]
})
}
})