コンテキスト
Nuxt Kitは、コンテキストの操作に役立つユーティリティのセットを提供します。
Nuxtモジュールを使用すると、Nuxtの機能を拡張できます。コードを整理し、モジュール化された方法で保持するための構造化された方法を提供します。モジュールをより小さなコンポーネントに分割する場合は、NuxtはuseNuxtとtryUseNuxt関数を提供します。これらの関数を使用すると、引数として渡す必要なく、コンテキストからNuxtインスタンスに簡単にアクセスできます。
Nuxtモジュールで
setup関数を使用している場合、Nuxtは既に2番目の引数として提供されています。つまり、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
}