Introduction

Since Nuxt 3 introduced extends feature, it is now possible to merge two or more Nuxt projects.

export default defineNuxtConfig({  extends: ['@nuxt-themes/docus']})

This feature is extremely powerful, especially if you are trying to implement a theming system.

What @nuxt-themes/config offers is opt-in features that makes the life of theme authors easier.

Theme configuration

You can see a theme like a Nuxt project with a configurable UI and feature set.

While building your theme, you might want your users to have an easy way to toggle or configure some features.

@nuxt-themes/config solves that issue by providing a common API for all themes to do that.

Let's take an easy example on how @nuxt-themes/config helps with that.

1. Define the configuration option.
   theme/theme.config.ts

    export default defineThemeConfig({   theme: {     // Theme options     options: {       header: {         title: 'My Theme'       }     },     // Design Tokens     tokens: {       colors: {         primary: '#A288A6'       }     }   } })

2. Use the configuration key in your components.
   layout/default.vue

   <template><!-- Template usage --><main> <header v-if="hasHeader">   <h1>{{ $theme.value.title }}</h1> </header></main></template><script setup lang="ts">// Composable usageconst theme = useTheme()const hasHeader = computed(() => theme.value.header)</script>

Design Tokens

Design Tokens support is offered by the @nuxtjs/design-tokens module.

You can visit the documentation or the repository.

These will learn you how to go even deeper in making your theme appearance configurable.

Theme Metas

As for now, the theme only supports basic informations like name or author.

Theme metas exists to prepare your theme to be ready to be referenced and categorized by Nuxt themes website.

It is also used to display the name of the theme to the user that uses it.