defineNuxtPlugin

Source
Хелпер для создания Nuxt-плагинов.

defineNuxtPlugin — хелпер для создания Nuxt-плагинов с улучшенной типизацией. Приводит разные форматы плагинов к единой структуре, совместимой с системой плагинов Nuxt.

plugins/hello.ts
export default 
defineNuxtPlugin
((
nuxtApp
) => {
  // Doing something with nuxtApp
})
Узнать больше Docs > 4 X > Directory Structure > App > Plugins#creating Plugins.

Тип

Signature
export function defineNuxtPlugin<T extends Record<string, unknown>> (plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>

type Plugin<T> = (nuxt: NuxtApp) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }

interface ObjectPlugin<T> {
  name?: string
  enforce?: 'pre' | 'default' | 'post'
  dependsOn?: string[]
  order?: number
  parallel?: boolean
  setup?: Plugin<T>
  hooks?: Partial<RuntimeNuxtHooks>
  env?: {
    islands?: boolean
  }
}

Параметры

plugin: плагин задаётся одним из двух способов:

  1. Функция: получает экземпляр NuxtApp, может вернуть объект с provide для добавления хелперов в NuxtApp.
  2. Объект: свойства name, enforce, dependsOn, order, parallel, setup, hooks, env для настройки поведения.
СвойствоТипОбязательныйОписание
namestringнетИмя плагина (отладка, зависимости).
enforce'pre' | 'default' | 'post'нетКогда выполнять плагин относительно других.
dependsOnstring[]нетИмена плагинов, от которых зависит этот. Задаёт порядок выполнения.
ordernumberнетТонкая настройка порядка. Переопределяет enforce при сортировке. Для продвинутых.
parallelbooleanнетВыполнять параллельно с другими помеченными плагинами.
setupPlugin<T>нетОсновная функция плагина (как при передаче функции).
hooksPartial<RuntimeNuxtHooks>нетХуки runtime Nuxt для регистрации.
env{ islands?: boolean }нетfalse — не запускать плагин при рендере server-only и island-компонентов.

Примеры

Базовое использование

Плагин с глобальным хелпером:

plugins/hello.ts
export default 
defineNuxtPlugin
((
nuxtApp
) => {
  return {
    
provide
: {
      
hello
: (
name
: string) => `Hello ${
name
}!`,
    },
  }
})

Плагин в виде объекта

Объектный синтаксис с расширенной настройкой:

plugins/advanced.ts
export default 
defineNuxtPlugin
({
  
name
: 'my-plugin',
  
enforce
: 'pre',
  async 
setup
 (
nuxtApp
) {
    const 
data
 = await 
$fetch
('/api/config')

    return {
      
provide
: {
        
config
: 
data
,
      },
    }
  },
  
hooks
: {
    'app:created' () {
      
console
.
log
('App created!')
    },
  },
})