Изучите Nuxt с коллекцией из 100+ советов!

Модули

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('Мой модуль готов с текущим вариантом тестирования: ', 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) {
    // установит @nuxtjs/fontaine с шрифтом Roboto и запасным шрифтом Impact
    await installModule('@nuxtjs/fontaine', {
      // конфигурация модуля
      fonts: [
        {
          family: 'Roboto',
          fallbacks: ['Impact'],
          fallbackName: 'fallback-a',
        }
      ]
    })
  }
})