Options

theme.options is a plain object definition that gets processed by untyped to generate a type definition object.

This allows the options defined by the theme author in his theme.options key to be type-safe.

The theme user that will configure his theme via the same key or a theme.config file will get auto-completion from the configuration you defined.

Defining theme options

There is two ways to define theme options:

• Via the theme.options key in the nuxt.config file.
• Via the theme.config file at the root of your project.

Both of these options will be merged an available via the $theme global property and useTheme in your app.

These two ways will both work for theme authors and theme users as they will get processed in order of priority (user configuration > theme defaults).

export default defineThemeConfig({  theme: {    options: {      header: true,      footer: {        text: 'Made by NuxtLabs',        credits: false      }    }  }})

import { defineTheme } from '@nuxt-themes/config'export default defineTheme({  header: true,  footer: {    text: 'Made by NuxtLabs',    credits: false  }})

Consuming theme options

Theme options gets merged by defu and a type gets generated from it by untyped.

This merged object will get injected into your app and be available everywhere.

• Composable usage

  const theme = useTheme()const hasHeader = computed(() => !!theme.value.header)

• <template> usage

  <template><header v-if="!!$theme.value.header">  My Header</header></template>

• server usage
  server/api/theme-options.ts

  export default defineHandler(() => {  const { theme } = useRuntimeConfig().public  return {    theme  }})

Metas

theme.meta is only useful for Nuxt Theme Kit and other providers that need to parse and reference your theme.

It has no need to be accessed from a Nuxt environment, but gives the nice message saying which theme you are using when your app boots! ✨