コンテキスト
Nuxt Kit は、コンテキストを扱うためのユーティリティを提供します。
Nuxt モジュールは、Nuxt の機能を強化することができます。これにより、コードを整理し、モジュール化するための構造化された方法が提供されます。モジュールをより小さなコンポーネントに分割したい場合、Nuxt は useNuxt と tryUseNuxt 関数を提供します。これらの関数を使用すると、引数として渡すことなく、コンテキストから Nuxt インスタンスに便利にアクセスできます。
Nuxt モジュールで setup 関数を使用する場合、Nuxt はすでに第二引数として提供されています。つまり、useNuxt() を呼び出すことなく直接アクセスできます。
useNuxt
コンテキストから Nuxt インスタンスを取得します。Nuxt が利用できない場合はエラーをスローします。
使用法
import { useNuxt } from '@nuxt/kit'
const setupSomeFeature = () => {
const nuxt = useNuxt()
// ここで nuxt インスタンスを使用できます
console.log(nuxt.options)
}
型
// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function useNuxt(): Nuxt
戻り値
useNuxt 関数は Nuxt インスタンスを返します。このインスタンスには、Nuxt で利用可能なすべてのオプションとメソッドが含まれています。
| プロパティ | 型 | 説明 |
|---|---|---|
options | NuxtOptions | 解決された Nuxt の設定。 |
hooks | Hookable<NuxtHooks> | Nuxt のフックシステム。ライフサイクルイベントの登録とリスニングを可能にします。 |
hook | (name: string, (...args: any[]) => Promise<void> | void) => () => void | 特定のライフサイクルフックに対して単一のコールバックを登録するためのショートカット。 |
callHook | (name: string, ...args: any[]) => Promise<any> | ライフサイクルフックを手動でトリガーし、登録されたすべてのコールバックを実行するためのショートカット。 |
addHooks | (configHooks: NestedHooks) => () => void | 複数のフックを一度に登録するためのショートカット。 |
例
import { useNuxt } from '@nuxt/kit'
export const setupTranspilation = () => {
const nuxt = useNuxt()
if (nuxt.options.builder === '@nuxt/webpack-builder') {
nuxt.options.build.transpile ||= []
nuxt.options.build.transpile.push('xstate')
}
}
tryUseNuxt
コンテキストから Nuxt インスタンスを取得します。Nuxt が利用できない場合は null を返します。
使用法
import { tryUseNuxt } from '@nuxt/kit'
function setupSomething () {
const nuxt = tryUseNuxt()
if (nuxt) {
// ここで nuxt インスタンスを使用できます
console.log(nuxt.options)
} else {
console.log('Nuxt は利用できません')
}
}
型
// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function tryUseNuxt(): Nuxt | null
戻り値
tryUseNuxt 関数は、利用可能な場合は Nuxt インスタンスを返し、Nuxt が利用できない場合は null を返します。
Nuxt インスタンスは useNuxt セクションで説明されている通りです。
例
declare module '@nuxt/schema' {
interface NuxtOptions {
siteConfig: SiteConfig
}
}
// ---cut---
import { tryUseNuxt } from '@nuxt/kit'
interface SiteConfig {
title?: string
}
export const requireSiteConfig = (): SiteConfig => {
const nuxt = tryUseNuxt()
if (!nuxt) {
return {}
}
return nuxt.options.siteConfig
}