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 an argument.

useNuxt

Get the Nuxt instance from the context. It will throw an error if Nuxt is not available.

Usage

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

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

Type

twoslash
// @errors: 2391
// ---cut---
function useNuxt (): Nuxt

Return Value

The useNuxt function returns the Nuxt instance, which contains all the options and methods available in Nuxt.

Examples

export const setupTranspilation = () => {
  const nuxt = useNuxt()

  if (nuxt.options.builder === '@nuxt/webpack-builder') {
    nuxt.options.build.transpile ||= []
    nuxt.options.build.transpile.push('xstate')
  }
}

tryUseNuxt

Get the Nuxt instance from the context. It will return null if Nuxt is not available.

Usage

twoslash

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')
  }
}

Type

twoslash
// @errors: 2391
// ---cut---
function tryUseNuxt (): Nuxt | null

Return Value

The tryUseNuxt function returns the Nuxt instance if available, or null if Nuxt is not available.

The Nuxt instance as described in the useNuxt section.

Examples

declare module 'nuxt/schema' {
  interface NuxtOptions {
    siteConfig: SiteConfig
  }
}
// ---cut---

interface SiteConfig {
  title?: string
}

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