上下文 (Context)
Nuxt Kit 提供了一組實用工具，協助您處理上下文。
Nuxt 模組允許您增強 Nuxt 的功能。它們提供了一種結構化的方式來保持程式碼的組織性和模組化。如果您希望將模組分解為更小的組件，Nuxt 提供了 useNuxt 和 tryUseNuxt 函式。這些函式使您可以方便地從上下文存取 Nuxt 實例，而無需將其作為參數傳遞。
當您在 Nuxt 模組中使用
setup 函式時，Nuxt 已經作為第二個參數提供。這表示您可以直接使用它，而無需調用 useNuxt()。您可以參考 Nuxt Site Config 作為使用範例。useNuxt
從上下文中取得 Nuxt 實例。如果 Nuxt 不可用，則會拋出錯誤。
類型 (Type)
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>
}
範例 (Examples)
// 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。
類型 (Type)
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>
}
範例 (Examples)
// 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
}