[{"_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"},{"_path":"/themes/docus","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Docus","description":"Docus is the offical Nuxt documentation theme.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus offers all the features needed to build a modern looking documentation without efforts."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is the predecessor of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/content-theme-docs"}]},{"type":"text","value":" that used to power the Nuxt 2 modules documentations!"}]},{"type":"element","tag":"button-link","props":{":blank":"true","blank":true,"class":"w-full text-center flex items-center justify-center","to":"https://docus.dev"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"icon","props":{"class":"mr-2","name":"heroicons-outline:link"},"children":[]},{"type":"text","value":"Visit Docus documentation"}]}]},{"type":"element","tag":"h2","props":{"id":"features"},"children":[{"type":"text","value":"Features"}]},{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"packages/docs/components"},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"20+ components"}]}]},{"type":"text","value":" ready to build your documentation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fluid"}]},{"type":"text","value":" configurable layouts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatically generated navigation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Table of Contents support"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://tailwindcss.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"TailwindCSS"}]},{"type":"text","value":" integration"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://color-mode.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Color mode module"}]},{"type":"text","value":" integration"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://algolia.nuxtjs.org/docsearch","rel":["nofollow"]},"children":[{"type":"text","value":"Algolia module"}]},{"type":"text","value":" integration"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/packages/github/features"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@docus/github"}]}]},{"type":"text","value":" integration"}]}]}]},{"type":"element","tag":"h2","props":{"id":"how-to-use-it-"},"children":[{"type":"text","value":"How to use it ?"}]},{"type":"element","tag":"h3","props":{"id":"using-the-starter"},"children":[{"type":"text","value":"Using the starter"}]},{"type":"element","tag":"code","props":{"code":"npx nuxi init my-docus-project -t docus\ncd my-docus-project\nyarn\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx nuxi init my-docus-project -t docus\ncd my-docus-project\nyarn\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"add-it-to-an-existing-project"},"children":[{"type":"text","value":"Add it to an existing project"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add the theme to your project"}]}]},{"type":"element","tag":"code","props":{"code":"yarn add --dev @nuxt-themes/docus\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add --dev @nuxt-themes/docus\n"}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install it in your Nuxt app"}]}]},{"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":"h3","props":{"id":"configure-your-theme"},"children":[{"type":"text","value":"Configure your theme"}]},{"type":"element","tag":"code","props":{"code":"import { defineTheme } from '@nuxt-themes/config'\n\nexport default defineTheme({\n  title: 'My Documentation Project',\n  description: 'This documentation is about my awesome package.',\n  url: 'https://myawesomepackage.dev',\n  socials: {\n    twitter: '@nuxt_js',\n    github: 'nuxt-themes/config'\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":"import { defineTheme } from '@nuxt-themes/config'\n\nexport default defineTheme({\n  title: 'My Documentation Project',\n  description: 'This documentation is about my awesome package.',\n  url: 'https://myawesomepackage.dev',\n  socials: {\n    twitter: '@nuxt_js',\n    github: 'nuxt-themes/config'\n  }\n})\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"start-the-project"},"children":[{"type":"text","value":"Start the project"}]},{"type":"element","tag":"code","props":{"code":"cd my-docus-project\nyarn dev\n✨ Your Docus project is ready!\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd my-docus-project\nyarn dev\n✨ Your Docus project is ready!\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"deploy-it"},"children":[{"type":"text","value":"Deploy it"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As any Nuxt 3 project, Docus supports both Node, Edge and Static deployments."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Build a Node server:"}]},{"type":"element","tag":"code","props":{"code":"nuxi build\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"nuxi build\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Build a static website:"}]},{"type":"element","tag":"code","props":{"code":"nuxi generate\n","language":"bash"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"nuxi generate\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"who-uses-it-"},"children":[{"type":"text","value":"Who uses it ?"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://docus.dev","rel":["nofollow"]},"children":[{"type":"text","value":"https://docus.dev"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://strapi.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://strapi.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://v3.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://tailwindcss.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://tailwindcss.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://color-mode.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://color-mode.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://supabase.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://supabase.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://design-tokens.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://content.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://sanity.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"https://sanity.nuxtjs.org"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://prismic-module.netlify.app","rel":["nofollow"]},"children":[{"type":"text","value":"https://prismic-module.netlify.app"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt-themes.netlify.app","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt-themes.netlify.app"}]}]}]}]},"_type":"markdown","_id":"content:2.themes:1.docus.md","_source":"content","_file":"2.themes/1.docus.md","_extension":"md"}]