[null,{"_path":"/guide/get-started","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Setting up a theme","description":"Create a theme from your Nuxt app in a few simple steps.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A theme share a similar structure as any other "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":" project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Turning a Nuxt project into a theme is as easy as adding a module and configuring it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's walk through the steps of this process:"}]},{"type":"element","tag":"h2","props":{"id":"add-the-module"},"children":[{"type":"text","value":"Add the module"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxt-themes/config\n","filename":"Yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add --dev @nuxt-themes/config\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm install @nuxt-themes/config --save-dev\n","filename":"NPM","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install @nuxt-themes/config --save-dev\n"}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  modules: [\n    '@nuxt-themes/config/module'\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 defineNuxtConfig({\n  modules: [\n    '@nuxt-themes/config/module'\n  ]\n})\n"}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:information"},"children":[]},{"type":"text","value":" As "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" provides integrations with other "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt modules"}]},{"type":"text","value":", you might want to add it as the first module of the list."}]}]},{"type":"element","tag":"h2","props":{"id":"define-theme-metas"},"children":[{"type":"text","value":"Define theme metas"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  theme: {\n    meta: {\n      name: 'My Awesome Theme',\n      description: 'A really cool theme for your Nuxt app.',\n      author: '@Tahul',\n      url: 'https://myawesometheme.com',\n    }\n  },\n  modules: [\n    '@nuxt-themes/config/module'\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 defineNuxtConfig({\n  theme: {\n    meta: {\n      name: 'My Awesome Theme',\n      description: 'A really cool theme for your Nuxt app.',\n      author: '@Tahul',\n      url: 'https://myawesometheme.com',\n    }\n  },\n  modules: [\n    '@nuxt-themes/config/module'\n  ]\n})\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:sparkles"},"children":[]},{"type":"text","value":" Bravo! Your Nuxt app is now a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"theme"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h2","props":{"id":"prepare-for-release"},"children":[{"type":"text","value":"Prepare for release"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Releasing a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt Theme"}]},{"type":"text","value":" is as easy as publishing your Nuxt app on "},{"type":"element","tag":"a","props":{"href":"https://npmjs.com/","rel":["nofollow"]},"children":[{"type":"text","value":"NPM"}]},{"type":"text","value":"!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's prepare your project for this."}]},{"type":"element","tag":"code","props":{"code":"{\n  \"name\": \"my-nuxt-theme\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Toolkit for authoring Nuxt Themes\",\n  \"main\": \"./nuxt.config.ts\",\n  \"exports\": {\n    \".\": \"./nuxt.config.ts\",\n    \"./*\": \"./*/*.*\"\n  },\n}\n","filename":"package.json","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  \"name\": \"my-nuxt-theme\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Toolkit for authoring Nuxt Themes\",\n  \"main\": \"./nuxt.config.ts\",\n  \"exports\": {\n    \".\": \"./nuxt.config.ts\",\n    \"./*\": \"./*/*.*\"\n  },\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"npm publish --access public\n+ my-nuxt-theme@1.0.0\nYour theme is published ✨\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm publish --access public\n+ my-nuxt-theme@1.0.0\nYour theme is published ✨\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"use-your-theme"},"children":[{"type":"text","value":"Use your theme"}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"npm install my-nuxt-theme --save-dev\n","filename":"NPM","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install my-nuxt-theme --save-dev\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add --dev my-nuxt-theme\n","filename":"Yarn","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add --dev my-nuxt-theme\n"}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  extends: ['my-nuxt-theme'],\n  app: {\n    theme: {\n      // Your theme options\n      options: {},\n      // Your theme design tokens\n      tokens: {}\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 defineNuxtConfig({\n  extends: ['my-nuxt-theme'],\n  app: {\n    theme: {\n      // Your theme options\n      options: {},\n      // Your theme design tokens\n      tokens: {}\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn dev\n \nNuxt CLI v3.0.0-rc.4\n> Local:    http://localhost:3000\n \nℹ @nuxt-themes/config v1.0.0 enabled!\nℹ Using My Awesome Theme by @Tahul\n✔ Tokens built succesfully! \n \nYou are now using your theme 🎉\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn dev\n \nNuxt CLI v3.0.0-rc.4\n> Local:    http://localhost:3000\n \nℹ @nuxt-themes/config v1.0.0 enabled!\nℹ Using My Awesome Theme by @Tahul\n✔ Tokens built succesfully! \n \nYou are now using your theme 🎉\n"}]}]}]}]},"toc":true,"_type":"markdown","_id":"content:1.guide:2.get-started.md","_source":"content","_file":"1.guide/2.get-started.md","_extension":"md"}]