コンテキスト

ソース
Nuxt Kitは、コンテキストを扱うのに役立つ一連のユーティリティを提供します。

Nuxtモジュールは、Nuxtの機能を強化することができます。これらは、コードを整理し、モジュール化された状態に保つための構造化された方法を提供します。モジュールをより小さなコンポーネントに分割したい場合、NuxtはuseNuxtおよびtryUseNuxt関数を提供します。これらの関数を使用すると、引数として渡すことなく、コンテキストからNuxtインスタンスに簡単にアクセスできます。

Nuxtモジュールのsetup関数を使用する場合、Nuxtはすでに2番目の引数として提供されています。これは、useNuxt()を呼び出すことなく直接アクセスできることを意味します。

useNuxt

コンテキストからNuxtインスタンスを取得します。Nuxtが利用できない場合、エラーをスローします。

使用方法

import { useNuxt } from '@nuxt/kit'

const setupSomeFeature = () => {
  const nuxt = useNuxt()

  // You can now use the nuxt instance
  console.log(nuxt.options)
}

タイプ

function useNuxt (): Nuxt

戻り値

useNuxt関数は、Nuxtで利用可能なすべてのオプションとメソッドを含むNuxtインスタンスを返します。

プロパティタイプ説明
optionsNuxtOptions解決されたNuxt設定。
hooksHookable<NuxtHooks>Nuxtフックシステム。ライフサイクルイベントの登録とリスニングを可能にします。
hook(name: string, (...args: any[]) => Promise<void> | void) => () => voidnuxt.hooks.hookのショートカット。特定のライフサイクルフックに単一のコールバックを登録します。
callHook(name: string, ...args: any[]) => Promise<any>nuxt.hooks.callHookのショートカット。ライフサイクルフックを手動でトリガーし、登録されているすべてのコールバックを実行します。
addHooks(configHooks: NestedHooks) => () => voidnuxt.hooks.addHooksのショートカット。複数のフックを一度に登録します。

例

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) {
    // You can now use the nuxt instance
    console.log(nuxt.options)
  } else {
    console.log('Nuxt is not available')
  }
}

タイプ

function tryUseNuxt (): Nuxt | null

戻り値

tryUseNuxt関数は、Nuxtが利用可能な場合はNuxtインスタンスを返し、利用できない場合はnullを返します。

useNuxtセクションで説明されているNuxtインスタンス。

例

import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

export const requireSiteConfig = (): SiteConfig => {
  const nuxt = tryUseNuxt()
  if (!nuxt) {
    return {}
  }
  return nuxt.options.siteConfig
}