Контекст
Nuxt Kit предоставляет набор утилит, которые помогают вам работать с контекстом.
Модули Nuxt позволяют вам расширить возможности Nuxt. Они предоставляют структурированный способ сохранения вашего кода организованным и модульным. Если вы ищете способ разделить ваш модуль на более мелкие компоненты, Nuxt предоставляет функции useNuxt и tryUseNuxt. Эти функции позволяют вам удобно получить доступ к экземпляру Nuxt из контекста, не передавая его в качестве аргумента.
В функции
setup модулей Nuxt экземпляр Nuxt передаётся вторым аргументом — вызывать useNuxt() не обязательно.useNuxt
Получите экземпляр Nuxt из контекста. Он выбросит ошибку, если Nuxt недоступен.
Использование
import { useNuxt } from '@nuxt/kit'
const setupSomeFeature = () => {
const nuxt = useNuxt()
// экземпляр nuxt доступен
console.log(nuxt.options)
}
Тип
// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function useNuxt (): Nuxt
Возвращаемое значение
useNuxt возвращает экземпляр Nuxt с опциями и методами Nuxt.
| Свойство | Тип | Описание |
|---|---|---|
options | NuxtOptions | Итоговая конфигурация Nuxt. |
hooks | Hookable<NuxtHooks> | Система хуков Nuxt: регистрация и подписка на события жизненного цикла. |
hook | (name: string, (...args: any[]) => Promise<void> | void) => () => void | Сокращение для nuxt.hooks.hook. Регистрирует один колбэк для хука. |
callHook | (name: string, ...args: any[]) => Promise<any> | Сокращение для nuxt.hooks.callHook. Вызывает хук и все зарегистрированные колбэки. |
addHooks | (configHooks: NestedHooks) => () => void | Сокращение для nuxt.hooks.addHooks. Регистрирует несколько хуков. |
Примеры
import { useNuxt } from '@nuxt/kit'
export const setupTranspilation = () => {
const nuxt = useNuxt()
if (nuxt.options.builder === '@nuxt/webpack-builder') {
nuxt.options.build.transpile ||= []
nuxt.options.build.transpile.push('xstate')
}
}
// @module: esnext
// @filename: setupTranspilation.ts
export const setupTranspilation = () => {}
// @filename: module.ts
import { defineNuxtModule } from '@nuxt/kit'
// ---cut---
import { setupTranspilation } from './setupTranspilation'
export default defineNuxtModule({
setup () {
setupTranspilation()
},
})
tryUseNuxt
Получите экземпляр Nuxt из контекста. Он вернет null, если Nuxt недоступен.
Использование
import { tryUseNuxt } from '@nuxt/kit'
function setupSomething () {
const nuxt = tryUseNuxt()
if (nuxt) {
// экземпляр nuxt доступен
console.log(nuxt.options)
} else {
console.log('Nuxt недоступен')
}
}
Тип
// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function tryUseNuxt (): Nuxt | null
Возвращаемое значение
tryUseNuxt возвращает экземпляр Nuxt, если он доступен, иначе null. Структура экземпляра — как в разделе useNuxt.
Примеры
declare module 'nuxt/schema' {
interface NuxtOptions {
siteConfig: SiteConfig
}
}
// ---cut---
import { tryUseNuxt } from '@nuxt/kit'
interface SiteConfig {
title?: string
}
export const requireSiteConfig = (): SiteConfig => {
const nuxt = tryUseNuxt()
if (!nuxt) {
return {}
}
return nuxt.options.siteConfig
}
// @module: esnext
// @filename: requireSiteConfig.ts
interface SiteConfig {
title?: string
}
export const requireSiteConfig = (): SiteConfig => {
return {}
}
// @filename: module.ts
// ---cut---
import { defineNuxtModule, useNuxt } from '@nuxt/kit'
import { requireSiteConfig } from './requireSiteConfig'
export default defineNuxtModule({
setup (_, nuxt) {
const config = requireSiteConfig()
nuxt.options.app.head.title = config.title
},
})