Context
Nuxt Kit 提供了一套工具，帮助你处理上下文。
Nuxt 模块允许你增强 Nuxt 的功能。它们提供了一种结构化的方式来组织和模块化你的代码。如果你想将模块拆分为更小的组件，Nuxt 提供了 useNuxt 和 tryUseNuxt 函数。这些函数使你能够方便地从上下文中访问 Nuxt 实例，而无需将其作为参数传递。
当你在 Nuxt 模块的
setup 函数中工作时，Nuxt 已作为第二个参数提供。这意味着你可以直接使用它，而无需调用 useNuxt()。你可以参考 Nuxt Site Config 的使用示例。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
}