v3.16
Nuxt on GitHub

上下文

源代码
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
}