Nuxt3 中文课程《实战全栈开发简书》限时优惠

Context

Nuxt Kit 提供了一套工具,帮助你处理上下文。

Nuxt 模块允许你增强 Nuxt 的功能。它们提供了一种结构化的方式来组织和模块化你的代码。如果你想将模块拆分为更小的组件,Nuxt 提供了 useNuxttryUseNuxt 函数。这些函数使你能够方便地从上下文中访问 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
}