{"_path":"/guide/options","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Options","description":"Discover how to configure your theme with @nuxt-themes/config API.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.options"}]},{"type":"text","value":" is a plain object definition that gets processed by "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/untyped","rel":["nofollow"]},"children":[{"type":"text","value":"untyped"}]},{"type":"text","value":" to generate a type definition object."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This allows the options defined by the theme author in his "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.options"}]},{"type":"text","value":" key to be type-safe."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The theme user that will configure his theme via the same key or a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.config"}]},{"type":"text","value":" file will get auto-completion from the configuration you defined."}]},{"type":"element","tag":"h3","props":{"id":"defining-theme-options"},"children":[{"type":"text","value":"Defining theme options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is two ways to define theme options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.options"}]},{"type":"text","value":" key in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.config"}]},{"type":"text","value":" file at the root of your project."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both of these options will be merged an available via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$theme"}]},{"type":"text","value":" global property and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useTheme"}]},{"type":"text","value":" in your app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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)."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default defineThemeConfig({\n  theme: {\n    options: {\n      header: true,\n      footer: {\n        text: 'Made by NuxtLabs',\n        credits: false\n      }\n    }\n  }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineThemeConfig({\n  theme: {\n    options: {\n      header: true,\n      footer: {\n        text: 'Made by NuxtLabs',\n        credits: false\n      }\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"import { defineTheme } from '@nuxt-themes/config'\n\nexport default defineTheme({\n  header: true,\n  footer: {\n    text: 'Made by NuxtLabs',\n    credits: false\n  }\n})\n","filename":"theme.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineTheme } from '@nuxt-themes/config'\n\nexport default defineTheme({\n  header: true,\n  footer: {\n    text: 'Made by NuxtLabs',\n    credits: false\n  }\n})\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"consuming-theme-options"},"children":[{"type":"text","value":"Consuming theme options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme options gets merged by "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/defu","rel":["nofollow"]},"children":[{"type":"text","value":"defu"}]},{"type":"text","value":" and a type gets generated from it by "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/untyped","rel":["nofollow"]},"children":[{"type":"text","value":"untyped"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This merged object will get injected into your app and be available everywhere."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Composable usage"}]},{"type":"element","tag":"code","props":{"code":"const theme = useTheme()\n\nconst hasHeader = computed(() => !!theme.value.header)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const theme = useTheme()\n\nconst hasHeader = computed(() => !!theme.value.header)\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<template>"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"<template>\n<header v-if=\"!!$theme.value.header\">\n  My Header\n</header>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n<header v-if=\"!!$theme.value.header\">\n  My Header\n</header>\n</template>\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"export default defineHandler(() => {\n  const { theme } = useRuntimeConfig().public\n\n  return {\n    theme\n  }\n})\n","filename":"server/api/theme-options.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineHandler(() => {\n  const { theme } = useRuntimeConfig().public\n\n  return {\n    theme\n  }\n})\n"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"metas"},"children":[{"type":"text","value":"Metas"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.meta"}]},{"type":"text","value":" is only useful for Nuxt Theme Kit and other providers that need to parse and reference your theme."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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! ✨"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.options"}]},{"type":"text","value":" is a plain object definition that gets processed by "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/untyped","rel":["nofollow"]},"children":[{"type":"text","value":"untyped"}]},{"type":"text","value":" to generate a type definition object."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This allows the options defined by the theme author in his "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.options"}]},{"type":"text","value":" key to be type-safe."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The theme user that will configure his theme via the same key or a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.config"}]},{"type":"text","value":" file will get auto-completion from the configuration you defined."}]},{"type":"element","tag":"h3","props":{"id":"defining-theme-options"},"children":[{"type":"text","value":"Defining theme options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is two ways to define theme options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.options"}]},{"type":"text","value":" key in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.config"}]},{"type":"text","value":" file at the root of your project."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both of these options will be merged an available via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$theme"}]},{"type":"text","value":" global property and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useTheme"}]},{"type":"text","value":" in your app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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)."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default defineThemeConfig({\n  theme: {\n    options: {\n      header: true,\n      footer: {\n        text: 'Made by NuxtLabs',\n        credits: false\n      }\n    }\n  }\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-048e2b"},"children":[{"type":"text","value":"defineThemeConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"footer"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ae77a0"},"children":[{"type":"text","value":"'Made by NuxtLabs'"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"credits"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"import { defineTheme } from '@nuxt-themes/config'\n\nexport default defineTheme({\n  header: true,\n  footer: {\n    text: 'Made by NuxtLabs',\n    credits: false\n  }\n})\n","filename":"theme.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"defineTheme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae77a0"},"children":[{"type":"text","value":"'@nuxt-themes/config'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-048e2b"},"children":[{"type":"text","value":"defineTheme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"footer"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ae77a0"},"children":[{"type":"text","value":"'Made by NuxtLabs'"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"credits"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"consuming-theme-options"},"children":[{"type":"text","value":"Consuming theme options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme options gets merged by "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/defu","rel":["nofollow"]},"children":[{"type":"text","value":"defu"}]},{"type":"text","value":" and a type gets generated from it by "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/untyped","rel":["nofollow"]},"children":[{"type":"text","value":"untyped"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This merged object will get injected into your app and be available everywhere."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Composable usage"}]},{"type":"element","tag":"code","props":{"code":"const theme = useTheme()\n\nconst hasHeader = computed(() => !!theme.value.header)\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dca47b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-048e2b"},"children":[{"type":"text","value":"useTheme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"hasHeader"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dca47b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-048e2b"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dca47b"},"children":[{"type":"text","value":"!!"}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":")"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<template>"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"<template>\n<header v-if=\"!!$theme.value.header\">\n  My Header\n</header>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"v-if"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-dca47b"},"children":[{"type":"text","value":"!!"}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"$theme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"My"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"Header"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7380cb"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server"}]},{"type":"text","value":" usage"}]},{"type":"element","tag":"code","props":{"code":"export default defineHandler(() => {\n  const { theme } = useRuntimeConfig().public\n\n  return {\n    theme\n  }\n})\n","filename":"server/api/theme-options.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-048e2b"},"children":[{"type":"text","value":"defineHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-880ae0"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-dca47b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-048e2b"},"children":[{"type":"text","value":"useRuntimeConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"public"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-5006d4"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c34e00"},"children":[{"type":"text","value":"theme"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b6cb27"},"children":[{"type":"text","value":"})"}]}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"metas"},"children":[{"type":"text","value":"Metas"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme.meta"}]},{"type":"text","value":" is only useful for Nuxt Theme Kit and other providers that need to parse and reference your theme."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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! ✨"}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-dca47b{color:#56B6C2}.ct-880ae0{color:#E5C07B}.ct-ae77a0{color:#98C379}.ct-7380cb{color:#D19A66}.ct-c34e00{color:#E06C75}.ct-048e2b{color:#61AFEF}.ct-b6cb27{color:#ABB2BF}.ct-5006d4{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"defining-theme-options","depth":3,"text":"Defining theme options"},{"id":"consuming-theme-options","depth":3,"text":"Consuming theme options"},{"id":"metas","depth":2,"text":"Metas"}]}},"_type":"markdown","_id":"content:1.guide:3.options.md","_source":"content","_file":"1.guide/3.options.md","_extension":"md"}