[{"_path":"/guide/introduction","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Introduction","description":"How does theming work in Nuxt ?","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since Nuxt 3 introduced "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" feature, it is now possible to merge two or more Nuxt projects."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  extends: ['@nuxt-themes/docus']\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 defineNuxtConfig({\n  extends: ['@nuxt-themes/docus']\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"extremely"}]},{"type":"text","value":" powerful, especially if you are trying to implement a theming system."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" offers is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"opt-in"}]},{"type":"text","value":" features that makes the life of theme authors easier."}]},{"type":"element","tag":"h2","props":{"id":"-theme-configuration"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"icon-park:file-settings"},"children":[]},{"type":"text","value":" Theme configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can see a theme like a Nuxt project with a configurable UI and feature set."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While building your theme, you might want your users to have an easy way to toggle or configure some features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" solves that issue by providing a common API for all themes to do that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's take an easy example on how @nuxt-themes/config helps with that."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Define the configuration option."},{"type":"element","tag":"code","props":{"code":" export default defineThemeConfig({\n   theme: {\n     // Theme options\n     options: {\n       header: {\n         title: 'My Theme'\n       }\n     },\n     // Design Tokens\n     tokens: {\n       colors: {\n         primary: '#A288A6'\n       }\n     }\n   }\n })\n","filename":"theme/theme.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     // Theme options\n     options: {\n       header: {\n         title: 'My Theme'\n       }\n     },\n     // Design Tokens\n     tokens: {\n       colors: {\n         primary: '#A288A6'\n       }\n     }\n   }\n })\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the configuration key in your components."},{"type":"element","tag":"code","props":{"code":"<template>\n<!-- Template usage -->\n<main>\n <header v-if=\"hasHeader\">\n   <h1>{{ $theme.value.title }}</h1>\n </header>\n</main>\n</template>\n\n<script setup lang=\"ts\">\n// Composable usage\nconst theme = useTheme()\nconst hasHeader = computed(() => theme.value.header)\n</script>\n","filename":"layout/default.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n<!-- Template usage -->\n<main>\n <header v-if=\"hasHeader\">\n   <h1>{{ $theme.value.title }}</h1>\n </header>\n</main>\n</template>\n\n<script setup lang=\"ts\">\n// Composable usage\nconst theme = useTheme()\nconst hasHeader = computed(() => theme.value.header)\n</script>\n"}]}]}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"@nuxt-themes/config will automatically extract and generate a typing file from your theme options object.\n"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThis ensures any access to your theme via "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useTheme()"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$theme"}]},{"type":"text","value":" stays type-safe."}]}]},{"type":"element","tag":"h2","props":{"id":"-design-tokens"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:artist-palette"},"children":[]},{"type":"text","value":" Design Tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design Tokens support is offered by the "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]}]},{"type":"text","value":" module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can visit the "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt-commnunity/design-tokens","rel":["nofollow"]},"children":[{"type":"text","value":"repository"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These will learn you how to go even deeper in making your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"theme appearance"}]},{"type":"text","value":" configurable."}]},{"type":"element","tag":"h2","props":{"id":"-theme-metas"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:detective"},"children":[]},{"type":"text","value":" Theme Metas"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As for now, the theme only supports basic informations like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"author"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme metas exists to prepare your theme to be ready to be referenced and categorized by Nuxt themes website."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is also used to display the name of the theme to the user that uses it."}]}]},"_type":"markdown","_id":"content:1.guide:1.introduction.md","_source":"content","_file":"1.guide/1.introduction.md","_extension":"md"},{"_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! ✨"}]}]},"_type":"markdown","_id":"content:1.guide:3.options.md","_source":"content","_file":"1.guide/3.options.md","_extension":"md"}]