上下文
Nuxt Kit 提供了一系列实用工具来帮助你处理上下文。
Nuxt 模块允许你增强 Nuxt 的功能。它们提供了一种结构化的方式来保持你的代码组织化和模块化。如果你想将你的模块分解成更小的组件，Nuxt 提供了 useNuxt 和 tryUseNuxt 函数。这些函数允许你方便地从上下文中获取 Nuxt 实例，而不需要将其作为参数传递。
useNuxt
从上下文中获取 Nuxt 实例。如果 Nuxt 不可用，它将抛出一个错误。
类型
function useNuxt(): Nuxt
interface Nuxt {
options: NuxtOptions
hooks: Hookable<NuxtHooks>
hook: Nuxt['hooks']['hook']
callHook: Nuxt['hooks']['callHook']
addHooks: Nuxt['hooks']['addHooks']
ready: () => Promise<void>
close: () => Promise<void>
server?: any
vfs: Record<string, string>
apps: Record<string, NuxtApp>
}
示例
// https://github.com/Lexpeartha/nuxt-xstate/blob/main/src/parts/transpile.ts
import { useNuxt } from '@nuxt/kit'
export const setupTranspilation = () => {
const nuxt = useNuxt()
nuxt.options.build.transpile = nuxt.options.build.transpile || []
if (nuxt.options.builder === '@nuxt/webpack-builder') {
nuxt.options.build.transpile.push(
'xstate',
)
}
}
tryUseNuxt
从上下文中获取 Nuxt 实例。如果 Nuxt 不可用，它将返回 null。
类型
function tryUseNuxt(): Nuxt | null
interface Nuxt {
options: NuxtOptions
hooks: Hookable<NuxtHooks>
hook: Nuxt['hooks']['hook']
callHook: Nuxt['hooks']['callHook']
addHooks: Nuxt['hooks']['addHooks']
ready: () => Promise<void>
close: () => Promise<void>
server?: any
vfs: Record<string, string>
apps: Record<string, NuxtApp>
}
示例
// https://github.com/harlan-zw/nuxt-site-config/blob/main/test/assertions.test.ts
import { tryUseNuxt } from '@nuxt/kit'
interface SiteConfig {
title: string
}
export const requireSiteConfig = (): SiteConfig => {
const nuxt = tryUseNuxt()
if (!nuxt) {
return { title: null }
}
return nuxt.options.siteConfig
}