Context
Nuxt Kit provides a set of utilities to help you work with context.
Nuxt modules allow you to enhance Nuxt's capabilities. They offer a structured way to keep your code organized and modular. If you're looking to break down your module into smaller components, Nuxt offers the useNuxt and tryUseNuxt functions. These functions enable you to conveniently access the Nuxt instance from the context without having to pass it as argument.
setup function in Nuxt modules, Nuxt is already provided as the second argument. This means you can directly utilize it without needing to call useNuxt(). You can look at Nuxt Site Config as an example of usage.useNuxt
Get the Nuxt instance from the context. It will throw an error if Nuxt is not available.
Type
function useNuxt(): Nuxtinterface 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>}Examples
// https://github.com/Lexpeartha/nuxt-xstate/blob/main/src/parts/transpile.tsimport { 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
Get the Nuxt instance from the context. It will return null if Nuxt is not available.
Type
function tryUseNuxt(): Nuxt | nullinterface 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>}Examples
// https://github.com/harlan-zw/nuxt-site-config/blob/main/test/assertions.test.tsimport { tryUseNuxt } from '@nuxt/kit'interface SiteConfig { title: string}export const requireSiteConfig = (): SiteConfig => { const nuxt = tryUseNuxt() if (!nuxt) { return { title: null } } return nuxt.options.siteConfig}Components
Nuxt Kit provides a set of utilities to help you work with components. You can register components globally or locally, and also add directories to be scanned for components.
Pages
Nuxt Kit provides a set of utilities to help you create and use pages. You can use these utilities to manipulate the pages configuration or to define route rules.