Create a theme from your Nuxt app in a few simple steps.
A theme share a similar structure as any other Nuxt project.
Turning a Nuxt project into a theme is as easy as adding a module and configuring it.
Let's walk through the steps of this process:
yarn add --dev @nuxt-themes/configexport default defineNuxtConfig({ modules: [ '@nuxt-themes/config/module' ]})@nuxt-themes/config provides integrations with other Nuxt modules, you might want to add it as the first module of the list.export default defineNuxtConfig({ theme: { meta: { name: 'My Awesome Theme', description: 'A really cool theme for your Nuxt app.', author: '@Tahul', url: 'https://myawesometheme.com', } }, modules: [ '@nuxt-themes/config/module' ]})Releasing a Nuxt Theme is as easy as publishing your Nuxt app on NPM!
Let's prepare your project for this.
{ "name": "my-nuxt-theme", "version": "1.0.0", "description": "Toolkit for authoring Nuxt Themes", "main": "./nuxt.config.ts", "exports": { ".": "./nuxt.config.ts", "./*": "./*/*.*" },}npm publish --access public+ my-nuxt-theme@1.0.0Your theme is published āØnpm install my-nuxt-theme --save-devexport default defineNuxtConfig({ extends: ['my-nuxt-theme'], app: { theme: { // Your theme options options: {}, // Your theme design tokens tokens: {} } }})yarn dev Nuxt CLI v3.0.0-rc.4> Local: http://localhost:3000 ā¹ @nuxt-themes/config v1.0.0 enabled!ā¹ Using My Awesome Theme by @Tahulā Tokens built succesfully! You are now using your theme š