diff --git a/200.html b/200.html index b3d528a48..03a5232e4 100644 --- a/200.html +++ b/200.html @@ -33,5 +33,5 @@ -
- \ No newline at end of file +
+ \ No newline at end of file diff --git a/404.html b/404.html index a8329324a..76c06483e 100644 --- a/404.html +++ b/404.html @@ -33,5 +33,5 @@ -
- \ No newline at end of file +
+ \ No newline at end of file diff --git a/_nuxt/builds/latest.json b/_nuxt/builds/latest.json index 50651d3a1..937a8c5c7 100644 --- a/_nuxt/builds/latest.json +++ b/_nuxt/builds/latest.json @@ -1 +1 @@ -{"id":"269aaab7-4ad5-4cf4-b89f-4232564b4d11","timestamp":1729770323050} \ No newline at end of file +{"id":"be2b8fff-ac27-4704-8839-e9a7c0d6bee4","timestamp":1729772076962} \ No newline at end of file diff --git a/_nuxt/builds/meta/269aaab7-4ad5-4cf4-b89f-4232564b4d11.json b/_nuxt/builds/meta/be2b8fff-ac27-4704-8839-e9a7c0d6bee4.json similarity index 63% rename from _nuxt/builds/meta/269aaab7-4ad5-4cf4-b89f-4232564b4d11.json rename to _nuxt/builds/meta/be2b8fff-ac27-4704-8839-e9a7c0d6bee4.json index da997b335..54da39897 100644 --- a/_nuxt/builds/meta/269aaab7-4ad5-4cf4-b89f-4232564b4d11.json +++ b/_nuxt/builds/meta/be2b8fff-ac27-4704-8839-e9a7c0d6bee4.json @@ -1 +1 @@ -{"id":"269aaab7-4ad5-4cf4-b89f-4232564b4d11","timestamp":1729770323050,"matcher":{"static":{"/api/search":{"prerender":true}},"wildcard":{},"dynamic":{}},"prerendered":["/","/introduction/getting-started","/api/layouts","/introduction/project-structure","/introduction/writing-pages","/api/composables","/introduction/configuration","/api/components"]} \ No newline at end of file +{"id":"be2b8fff-ac27-4704-8839-e9a7c0d6bee4","timestamp":1729772076962,"matcher":{"static":{"/api/search":{"prerender":true}},"wildcard":{},"dynamic":{}},"prerendered":["/","/introduction/getting-started","/api/layouts","/introduction/project-structure","/introduction/writing-pages","/api/composables","/introduction/configuration","/api/components"]} \ No newline at end of file diff --git a/_payload.json b/_payload.json index 0b2541476..8e4ab7477 100644 --- a/_payload.json +++ b/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770353765] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772106110] \ No newline at end of file diff --git a/api/_content/cache.1729770320074.json b/api/_content/cache.1729772074176.json similarity index 99% rename from api/_content/cache.1729770320074.json rename to api/_content/cache.1729772074176.json index 1dd83955a..bc6f515be 100644 --- a/api/_content/cache.1729770320074.json +++ b/api/_content/cache.1729772074176.json @@ -1 +1 @@ -{"generatedAt":1729770353975,"generateTime":880,"contents":[{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"","title":"Home","description":"","navigation":false,"layout":"page","main":{"fluid":false},"body":{"type":"root","children":[{"type":"element","tag":"ellipsis","props":{"blur":"150px","width":"75%","right":"0px"},"children":[]},{"type":"element","tag":"block-hero","props":{":cta":"[\"Get started\",\"/introduction/getting-started\"]",":secondary":"[\"Open on GitHub →\",\"https://github.com/nuxt-themes/docus\"]"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best place to start your documentation."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write pages in "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Markdown"}]},{"type":"text","value":", use "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Vue"}]},{"type":"text","value":" components and enjoy the power of "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"template","props":{"v-slot:extra":""},"children":[{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"+50 Components"}]},{"type":"text","value":" ready to build rich pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Docs"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Page"}]},{"type":"text","value":" layouts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start from a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"README"}]},{"type":"text","value":", scale to a framework documentation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Navigation and Table of Contents generation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fully configurable design system"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Leverages "},{"type":"element","tag":"a","props":{"href":"https://typography.nuxt.space/","rel":["nofollow"]},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Typography"}]}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://elements.nuxt.dev","rel":["nofollow"]},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Elements"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Used on "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Content Documentation"}]}]}]}]}]},{"type":"element","tag":"template","props":{"v-slot:support":""},"children":[{"type":"element","tag":"terminal","props":{":content":"[\"npx nuxi@latest init -t themes/docus\",\"cd docs\",\"npm install\",\"npm run dev\"]"},"children":[]}]}]},{"type":"element","tag":"card-grid","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What's included"}]}]},{"type":"element","tag":"template","props":{"v-slot:root":""},"children":[{"type":"element","tag":"ellipsis","props":{"blur":"140px","width":"40rem","left":"0px","top":"10rem"},"children":[]}]},{"type":"element","tag":"card","props":{"icon":"logos:nuxt-icon"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Architecture"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Harness the full power of "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" and its "},{"type":"element","tag":"a","props":{"href":"https://modules.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" ecosystem."}]}]}]},{"type":"element","tag":"card","props":{"icon":"IconNuxtStudio"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Studio ready"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Edit your theme content and appearance with live-preview within "},{"type":"element","tag":"a","props":{"href":"https://nuxt.studio","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Studio"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"card","props":{"icon":"logos:vue"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue Components"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use built-in components (or your own!) inside your content."}]}]}]},{"type":"element","tag":"card","props":{"icon":"simple-icons:markdown"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write Markdown"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Enjoy the ease and simplicity of Markdown and discover "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/mdc","rel":["nofollow"]},"children":[{"type":"text","value":"MDC syntax"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"card","props":{"icon":"noto:rocket"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Deploy anywhere"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zero config on "},{"type":"element","tag":"a","props":{"href":"https://vercel.com","rel":["nofollow"]},"children":[{"type":"text","value":"Vercel"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://netlify.com","rel":["nofollow"]},"children":[{"type":"text","value":"Netlify"}]},{"type":"text","value":". Choose between static generation, on-demand rendering (Node) or edge-side rendering on "},{"type":"element","tag":"a","props":{"href":"https://workers.cloudflare.com","rel":["nofollow"]},"children":[{"type":"text","value":"CloudFlare workers"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"card","props":{"icon":"noto:puzzle-piece"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Extensible."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Customize the whole design, or add components using slots - you can make Docus your own."}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:0.index.md","_source":"content","_file":"0.index.md","_stem":"0.index","_extension":"md"},{"_path":"/introduction/_dir","_dir":"introduction","_draft":false,"_partial":true,"_locale":"","icon":"ph:star-duotone","navigation":{"redirect":"/introduction/getting-started"},"_id":"content:1.introduction:_dir.yml","_type":"yaml","title":"Dir","_source":"content","_file":"1.introduction/_dir.yml","_stem":"1.introduction/_dir","_extension":"yml"},{"_path":"/introduction/getting-started","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Getting Started","description":"From your Markdown files to a deployed website in few minutes.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"getting-started"},"children":[{"type":"text","value":"Getting Started"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"From your Markdown files to a deployed website in few minutes."}]},{"type":"element","tag":"h2","props":{"id":"play-online"},"children":[{"type":"text","value":"Play online"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can start playing with Docus in your browser using Stackblitz:"}]},{"type":"element","tag":"button-link","props":{":blank":"true","href":"https://stackblitz.com/github/nuxt-themes/docus-starter","icon":"IconStackBlitz","size":"small"},"children":[{"type":"text","value":"Play on StackBlitz"}]},{"type":"element","tag":"h2","props":{"id":"create-a-new-project"},"children":[{"type":"text","value":"Create a new project"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start a fresh Docus project with:"}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npx nuxi@latest init docs -t themes/docus\n","filename":"npx","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npx"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" nuxi@latest"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" init"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docs"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" -t"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" themes/docus\n"}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install the dependencies in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" folder:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npm install\n","filename":"npm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"yarn install\n","filename":"yarn","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"pnpm install --shamefully-hoist\n","filename":"pnpm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pnpm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" --shamefully-hoist\n"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"dev"}]},{"type":"text","value":" command to start Docus in development mode:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npm run dev\n","filename":"npm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" run"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" dev\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"yarn dev\n","filename":"yarn","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" dev\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"pnpm run dev\n","filename":"pnpm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pnpm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" run"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" dev\n"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"✨ Well done! A browser window should automatically open for "},{"type":"element","tag":"a","props":{"href":"http://localhost:3000","rel":["nofollow"]},"children":[{"type":"text","value":"http://localhost:3000"}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"play-online","depth":2,"text":"Play online"},{"id":"create-a-new-project","depth":2,"text":"Create a new project"}]}},"_type":"markdown","_id":"content:1.introduction:1.getting-started.md","_source":"content","_file":"1.introduction/1.getting-started.md","_stem":"1.introduction/1.getting-started","_extension":"md"},{"_path":"/introduction/project-structure","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Project Structure","description":"Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"project-structure"},"children":[{"type":"text","value":"Project Structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home."}]},{"type":"element","tag":"h2","props":{"id":"directory-structure"},"children":[{"type":"text","value":"Directory Structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the minimal directory structure to get an up and running Docus website."}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"content/\n index.md\napp.config.ts\nnuxt.config.ts\n","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"content/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" index.md\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"app.config.ts\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"nuxt.config.ts\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"content/"}]},{"type":"text","value":" directory is where you "},{"type":"element","tag":"a","props":{"href":"/introduction/writing-pages"},"children":[{"type":"text","value":"write Markdown pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.ts"}]},{"type":"text","value":" is where you "},{"type":"element","tag":"a","props":{"href":"/introduction/configuration"},"children":[{"type":"text","value":"configure Docus"}]},{"type":"text","value":" to fit your branding and design."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" is your "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/configuration","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt configuration"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"directory-structure","depth":2,"text":"Directory Structure"}]}},"_type":"markdown","_id":"content:1.introduction:2.project-structure.md","_source":"content","_file":"1.introduction/2.project-structure.md","_stem":"1.introduction/2.project-structure","_extension":"md"},{"_path":"/introduction/writing-pages","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Writing Pages","description":"Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"writing-pages"},"children":[{"type":"text","value":"Writing Pages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each Markdown page in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"content/"}]},{"type":"text","value":" folder will be mapped to a route."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"File"}]},{"type":"element","tag":"th","props":{"align":"left"},"children":[{"type":"text","value":"Generated route"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"index.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"about.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/about"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"blog/index.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/blog"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"blog/hello.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/blog/hello"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"1.guide/2.installation"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/guide/installation"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"frontmatter"},"children":[{"type":"text","value":"Frontmatter"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus supports multiple Front-matter attributes for pages."}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"---\ntitle: \"Get Started\"\ndescription: \"Let's learn how to use my amazing module.\"\n---\n","filename":"index.md","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"title: \"Get Started\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"description: \"Let's learn how to use my amazing module.\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Key"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"layout"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"default"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Use any layout name like you would in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"definePageMeta()"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Defines the page title and H1 in docs pages"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Defines the page description and excerpt in docs pages"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"redirect"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A route path to redirect"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"image"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"OpenGraph cover image"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Docs layout options"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of aside navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"toc"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of table of contents"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of the page header"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"bottom"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of page bottom section"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Navigation options"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"navigation"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of the page or directory in navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"navigation.title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Changes the name of the page or directory in navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"navigation.icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Changes the icon of the page or directory in navigation"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"frontmatter","depth":2,"text":"Frontmatter"}]}},"_type":"markdown","_id":"content:1.introduction:3.writing-pages.md","_source":"content","_file":"1.introduction/3.writing-pages.md","_stem":"1.introduction/3.writing-pages","_extension":"md"},{"_path":"/introduction/configuration","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Configuration","description":"Learn how to configure Docus.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn how to configure Docus."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"export default defineAppConfig({\n docus: {\n title: 'Docus',\n description: 'My Docus Project',\n url: 'http://docus.dev'\n }\n})\n","filename":"Minimal app.config.ts","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineAppConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" docus: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" description: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'My Docus Project'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" url: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'http://docus.dev'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"export default defineAppConfig({\n docus: {\n title: 'Docus',\n description: 'My Docus Project',\n url: 'http://docus.dev',\n image: '/social-card-preview.png',\n socials: {\n twitter: '@nuxt_js',\n github: 'nuxt-themes/docus',\n },\n github: {\n root: 'content',\n edit: true,\n contributors: false\n },\n layout: 'default',\n aside: {\n level: 1,\n filter: [],\n },\n header: {\n title: false,\n logo: true,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus',\n text: 'Powered by Docus',\n href: 'https://docus.dev',\n },\n textLinks: [\n {\n text: 'Nuxt',\n href: 'https://nuxt.com',\n target: '_blank',\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS',\n href: 'https://nuxtjs.org',\n component: 'IconNuxtLabs',\n },\n {\n label: 'Vue Telescope',\n href: 'https://vuetelescope.com',\n component: 'IconVueTelescope',\n },\n ],\n }\n }\n})\n","filename":"Complete app.config.ts","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineAppConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" docus: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" description: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'My Docus Project'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" url: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'http://docus.dev'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" image: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'/social-card-preview.png'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" socials: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" twitter: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'@nuxt_js'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" github: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'nuxt-themes/docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" github: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" root: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'content'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" edit: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" contributors: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" layout: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'default'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" aside: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" level: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" filter: [],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" header: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" logo: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" showLinkIcon: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" footer: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" credits: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" icon: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'IconDocus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" text: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Powered by Docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://docus.dev'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" textLinks: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" text: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Nuxt'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://nuxt.com'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" target: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'_blank'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" rel: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'noopener'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":38},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":39},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":40},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" iconLinks: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":41},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":42},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" label: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'NuxtJS'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":43},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://nuxtjs.org'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":44},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" component: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'IconNuxtLabs'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":45},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":46},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":47},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" label: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Vue Telescope'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":48},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://vuetelescope.com'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":49},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" component: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'IconVueTelescope'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":50},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":51},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":52},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":53},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":54},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Key"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Docus"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website title"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"titleTemplate"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Docus"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website title template"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"My Docus Project"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website description"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"url"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website URL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"layout"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fallback layout to use (supports "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Socials"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{}"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Social links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.github"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The repository to use on GitHub links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.twitter"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Twitter links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.youtube"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The channel to use on Youtube links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.instagram"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Instagram links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.facebook"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Facebook links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.medium"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Medium links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social]"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Override social or display custom one"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].label"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A label to use for the social"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A icon to use for the social"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].href"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A link to use for the social"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].rel"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"noopener noreferrer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A space-separated list of "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","rel":["nofollow"]},"children":[{"type":"text","value":"link types"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Header"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Header configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.logo"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Whether or not to use "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Logo.vue"}]},{"type":"text","value":" as the header logo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"If set to a string, will be used in the header"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.showLinkIcon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"If set to "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" links icons will show in the header"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.exclude"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string[]"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of path to exclude out from the header navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.fluid"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make header "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Main"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Main configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main.fluid"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make main content "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main.padded"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make main content "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" padded"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Aside"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Aside configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside.level"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Aside base level of nesting"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside.collapsed"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Will be used as default value for collapsible navigation categories"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside.exclude"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string[]"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of path to exclude out from the aside navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Footer"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Footer configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.credits"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An object defining the bottom left credits"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.credits.icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The icon to use for the credits"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.credits.text"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The text to use for the credits"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"array"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[]"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of texts to display at the center of footer"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].text"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The text to display"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].href"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A link to use for the text"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].target"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"_self"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Where to display the linked URL, as the name for a browsing context"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].rel"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"noopener noreferrer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A space-separated list of "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","rel":["nofollow"]},"children":[{"type":"text","value":"link types"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"array"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[]"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of icons to display in the footer"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].label"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A label to use for the icon"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].href"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A link to use for the icon"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The icon to use (can be a component name)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].rel"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"noopener noreferrer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A space-separated list of "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","rel":["nofollow"]},"children":[{"type":"text","value":"link types"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.fluid"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make footer "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"GitHub integration configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.dir"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Directory containing the files to be edited"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.branch"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Branch to start editing"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.repo"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Name of the GitHub repo to edit files"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.owner"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Owner of the repo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.edit"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggle \"Edit this page on Github\" component on documentation pages"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Search"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"fuse"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"useFuse "},{"type":"element","tag":"a","props":{"href":"https://vueuse.org/integrations/useFuse/","rel":["nofollow"]},"children":[{"type":"text","value":"options"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"customizing-the-logo"},"children":[{"type":"text","value":"Customizing the logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To update the logo in the header, create a component in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"components/Logo.vue"}]},{"type":"text","value":" with your own logo."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this example, the image is located at "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/public/img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"className":"language-vue shiki shiki-themes github-dark github-light","code":"\n","filename":"components/Logo.vue","language":"vue","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" width"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"\"120\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" src"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"\"/img/YOURLOGO.png\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"/>\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"customizing-the-logo","depth":2,"text":"Customizing the logo"}]}},"_type":"markdown","_id":"content:1.introduction:4.configuration.md","_source":"content","_file":"1.introduction/4.configuration.md","_stem":"1.introduction/4.configuration","_extension":"md"},{"_path":"/api/_dir","_dir":"api","_draft":false,"_partial":true,"_locale":"","title":"API","icon":"heroicons-outline:bookmark-alt","_id":"content:2.api:_dir.yml","_type":"yaml","_source":"content","_file":"2.api/_dir.yml","_stem":"2.api/_dir","_extension":"yml"},{"_path":"/api/components","_dir":"api","_draft":false,"_partial":false,"_locale":"","title":"Components","description":"Discover every component you can use in your content.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"components"},"children":[{"type":"text","value":"Components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Discover every component you can use in your content."}]},{"type":"element","tag":"h2","props":{"id":"alert"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"alert","props":{"type":"info","style":"margin-top: 0;"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"info"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"success"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"warning"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"alert","props":{"type":"danger","style":"margin-bottom: 0;"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"danger"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::alert{type=\"info\"}\nCheck out an **info** alert with `code` and a [link](/).\n::\n\n::alert{type=\"success\"}\nCheck out a **success** alert with `code` and a [link](/).\n::\n\n::alert{type=\"warning\"}\nCheck out a **warning** alert with `code` and a [link](/).\n::\n\n::alert{type=\"danger\"}\nCheck out a **danger** alert with `code` and a [link](/).\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"info\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out an "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**info**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"success\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out a "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**success**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out a "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**warning**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"danger\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out a "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**danger**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Alert.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"badge"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":" support same types as "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":"."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"div","props":{"style":"display:flex; gap: 1rem;"},"children":[{"type":"element","tag":"badge","props":{},"children":[{"type":"text","value":"v1.2"}]},{"type":"element","tag":"badge","props":{"type":"warning"},"children":[{"type":"text","value":"Deprecated"}]},{"type":"element","tag":"badge","props":{"type":"danger"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not found!"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":badge[v1.2]\n\n:badge[Deprecated]{type=\"warning\"}\n\n::badge{type=\"danger\"}\nNot found!\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":badge["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"v1.2"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":badge["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"Deprecated"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::badge{type=\"danger\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Not found!\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Badge.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"blockhero"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"block-hero","props":{":cta":"[\"Get started\",\"/introduction/getting-started\"]",":secondary":"[\"Open on GitHub →\",\"https://github.com/nuxtlabs/docus\"]","snippet":"npx nuxi@latest init docus-app -t nuxtlabs/docus-starter"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Document-driven framework"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites."}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::block-hero\n---\ncta:\n - Get started\n - /get-started\nsecondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\nsnippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n---\n#title\nDocument-driven framework\n\n#description\nDocus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::block-hero\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"cta:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Get started\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" /get-started\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"secondary:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Open on GitHub →\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" https://github.com/nuxtlabs/docus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Document-driven framework\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/BlockHero.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"buttonlink"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"button-link","props":{":blank":"true","href":"https://stackblitz.com/github/nuxtlabs/docus-starter","icon":"IconStackBlitz"},"children":[{"type":"text","value":"Play on StackBlitz"}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/ButtonLink.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"callout"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":" support same types as "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":"."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"callout","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:summary":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a callout! Click me to open."}]}]},{"type":"element","tag":"template","props":{"v-slot:content":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the content of the callout."}]}]}]},{"type":"element","tag":"callout","props":{"type":"warning"},"children":[{"type":"element","tag":"template","props":{"v-slot:summary":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a callout! Click me to open."}]}]},{"type":"element","tag":"template","props":{"v-slot:content":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the content of the callout."}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::callout\n#summary\nThis is a callout! Click me to open.\n\n#content\nThis is the content of the callout.\n::\n \n::callout{type=\"warning\"}\n#summary\nThis is a callout! Click me to open.\n\n#content\nThis is the content of the callout.\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::callout\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#summary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is a callout! Click me to open.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#content\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is the content of the callout.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::callout{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#summary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is a callout! Click me to open.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#content\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is the content of the callout.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Callout.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"card"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"card","props":{"icon":"logos:nuxt-icon"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Architecture."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt Content"}]},{"type":"text","value":". "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nUse Nuxt to build a static site, or a serverless app."}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":" ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content**. :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card{icon=\"logos:nuxt-icon\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Nuxt Architecture.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Based on "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**Nuxt 3**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**Nuxt Content**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":". :br\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Use Nuxt to build a static site, or a serverless app.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Card.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"cardgrid"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"card-grid","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What's included?"}]}]},{"type":"element","tag":"template","props":{"v-slot:root":""},"children":[{"type":"element","tag":"ellipsis","props":{},"children":[]}]},{"type":"element","tag":"card","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Architecture."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Harness the full power of Nuxt and the Nuxt ecosystem."}]}]}]},{"type":"element","tag":"card","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue Components."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use built-in components (or your own!) inside your content."}]}]}]},{"type":"element","tag":"card","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write Markdown."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Enjoy the ease and simplicity of Markdown and discover MDC syntax."}]}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::card-grid\n#title\nWhat's included\n\n#root\n:ellipsis\n\n#default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::card-grid\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"What's included\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#root\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":ellipsis\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#default\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Nuxt Architecture.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Harness the full power of Nuxt and the Nuxt ecosystem.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Vue Components.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Use built-in components (or your own!) inside your content.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Write Markdown.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CardGrid.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"codegroup"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component uses "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"slots"}]},{"type":"text","value":" to create a tab panel of your code examples or preview."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"yarn add docus\n","filename":"Yarn","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" add"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npm install docus\n","filename":"NPM","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::code-group\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```bash [Yarn]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" add"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```bash [NPM]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CodeGroup.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"codeblock"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To be used inside a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":" component to display a preview of some rendered code."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"badge","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hello World!"}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"/* Added as a child of `` */\n\n::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"/* Added as a child of "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"``"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" */\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::code-block{label=\"Preview\" preview}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::badge\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Hello World!\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CodeBlock.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"copybutton"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"copy-button","props":{"content":"hey!"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":copy-button{content=\"hey!\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":copy-button{content=\"hey!\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CopyButton.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"icon"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icon component gives you access to all "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"100,000+"}]},{"type":"text","value":" icons from "},{"type":"element","tag":"a","props":{"href":"https://icones.js.org","rel":["nofollow"]},"children":[{"type":"text","value":"icones.js.org"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"icon","props":{"name":"logos:nuxt-icon"},"children":[]},{"type":"element","tag":"icon","props":{"name":"logos:vue"},"children":[]},{"type":"element","tag":"icon","props":{"name":"logos:nuxt-icon"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":icon{name=\"logos:nuxt-icon\"}\n:icon{name=\"logos:vue\"}\n:icon{name=\"logos:nuxt-icon\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":icon{name=\"logos:nuxt-icon\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":icon{name=\"logos:vue\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":icon{name=\"logos:nuxt-icon\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Icon.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"list"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"list","props":{"type":"primary"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always"}]}]}]},{"type":"element","tag":"list","props":{"type":"success"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Amazing"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Congrats"}]}]}]},{"type":"element","tag":"list","props":{"type":"info"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do you know?"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can also do this"}]}]}]},{"type":"element","tag":"list","props":{"type":"warning"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Be careful"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with precautions"}]}]}]},{"type":"element","tag":"list","props":{"type":"danger"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Drinking too much"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Driving drunk"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::list{type=\"primary\"}\n- **Important**\n- Always\n::\n\n::list{type=\"success\"}\n- Amazing\n- Congrats\n::\n\n::list{type=\"info\"}\n- Do you know?\n- You can also do this\n::\n\n::list{type=\"warning\"}\n- Be careful\n- Use with precautions\n::\n\n::list{type=\"danger\"}\n- Drinking too much\n- Driving drunk\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"primary\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":" **Important**\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Always\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"success\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Amazing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Congrats\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"info\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Do you know?\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" You can also do this\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Be careful\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Use with precautions\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"danger\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Drinking too much\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Driving drunk\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/List.vue"},"children":[]},{"type":"element","tag":"h2","props":{"id":"sandbox"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Embed CodeSandbox/StackBlitz easily in your documentation with great performances."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API","rel":["nofollow"]},"children":[{"type":"text","value":"IntersectionObserver"}]},{"type":"text","value":" to load when visible in the viewport."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"sandbox","props":{"src":"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Sandbox.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"terminal"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"terminal","props":{"content":"nuxi build"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":terminal{content=\"nuxi build\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":terminal{content=\"nuxi build\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Terminal.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"videoplayer"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"div","props":{},"children":[{"type":"element","tag":"video-player","props":{"src":"https://www.youtube.com/watch?v=o9e12WbKrd8"},"children":[]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::div\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/VideoPlayer.vue"},"children":[]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"alert","depth":2,"text":""},{"id":"badge","depth":2,"text":""},{"id":"blockhero","depth":2,"text":""},{"id":"buttonlink","depth":2,"text":""},{"id":"callout","depth":2,"text":""},{"id":"card","depth":2,"text":""},{"id":"cardgrid","depth":2,"text":""},{"id":"codegroup","depth":2,"text":""},{"id":"codeblock","depth":2,"text":""},{"id":"copybutton","depth":2,"text":""},{"id":"icon","depth":2,"text":""},{"id":"list","depth":2,"text":""},{"id":"sandbox","depth":2,"text":""},{"id":"terminal","depth":2,"text":""},{"id":"videoplayer","depth":2,"text":""}]}},"_type":"markdown","_id":"content:2.api:1.components.md","_source":"content","_file":"2.api/1.components.md","_stem":"2.api/1.components","_extension":"md"},{"_path":"/api/composables","_dir":"api","_draft":false,"_partial":false,"_locale":"","title":"Composables","description":"Discover the Docus composables to use in your custom Vue components and pages.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"composables"},"children":[{"type":"text","value":"Composables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Discover the Docus composables to use in your custom Vue components and pages."}]},{"type":"element","tag":"h2","props":{"id":"usedocus"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useDocus()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":"language-ts shiki shiki-themes github-dark github-light","language":"ts","style":""},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"useDocus"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()"}]}]},{"type":"text","value":" gives access to docus runtime config, all default values and your custom config from "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.ts"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"config"}]},{"type":"text","value":" refers to the merged config of the current page."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"titleTemplate"}]},{"type":"text","value":" can be set from "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"_dir.yml"}]},{"type":"text","value":" and any "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page.md"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The configs in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config"}]},{"type":"text","value":" file will be used as defaults."}]},{"type":"element","tag":"pre","props":{"className":"language-vue shiki shiki-themes github-dark github-light","code":"\n\n\n","language":"vue","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useDocus"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"h1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">{{ config.title }}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">{{ config.description }}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"tree"}]},{"type":"text","value":" refers to the current navigation tree that is displayed in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]},{"type":"text","value":" component."}]}]},{"type":"element","tag":"pre","props":{"className":"language-vue shiki shiki-themes github-dark github-light","code":"\n\n\n","language":"vue","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"tree"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useDocus"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"DocsAsideTree"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" :links"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"\"tree\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"composables/useDocus.ts"},"children":[]},{"type":"element","tag":"h2","props":{"id":"usemenu"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useMenu()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useMenu()"}]},{"type":"text","value":" gives access to "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"$menu"}]},{"type":"text","value":" plugin controlling mobile navigation globally."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"const {\n // Is menu visible\n visible,\n // Close menu function\n close,\n // Open menu function\n open,\n // Toggle menu function\n toggle\n} = useMenu()\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Is menu visible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" visible"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Close menu function\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" close"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Open menu function\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" open"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Toggle menu function\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" toggle\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useMenu"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"composables/useMenu.ts"},"children":[]},{"type":"element","tag":"h2","props":{"id":"usescrollspy"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useScrollspy()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useScrollspy()"}]},{"type":"text","value":" is used in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" layout to make the ToC display the currently visible headings."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"const {\n // Headings on the page\n visibleHeadings,\n // Active headings (for the current page)\n activeHeadings,\n // Update headings (an array of DOM nodes)\n updateHeadings\n} = useScrollspy()\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Headings on the page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" visibleHeadings"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Active headings (for the current page)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" activeHeadings"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Update headings (an array of DOM nodes)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" updateHeadings\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useScrollspy"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"composables/useScrollspy.ts"},"children":[]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usedocus","depth":2,"text":"useDocus()"},{"id":"usemenu","depth":2,"text":"useMenu()"},{"id":"usescrollspy","depth":2,"text":"useScrollspy()"}]}},"_type":"markdown","_id":"content:2.api:2.composables.md","_source":"content","_file":"2.api/2.composables.md","_stem":"2.api/2.composables","_extension":"md"},{"_path":"/api/layouts","_dir":"api","_draft":false,"_partial":false,"_locale":"","title":"Layouts","description":"Docus provides multiple built-in layouts for displaying your Markdown pages.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"layouts"},"children":[{"type":"text","value":"Layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus provides multiple built-in layouts for displaying your Markdown pages."}]},{"type":"element","tag":"h2","props":{"id":"default"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"default"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default layout for every page created in the project. This layout renders multiple section alongside the content:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Aside navigation menu (togglable with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside: false/true"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Page bottom section (togglable with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"bottom: false/true"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Table of content (togglable with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"toc: false/true"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"---\naside: true\nbottom: true\ntoc: false\n---\n\nYour awesome content\n","filename":"index.md","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"aside: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"bottom: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"toc: false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Your awesome content\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Current page is live sample of default layout."}]},{"type":"element","tag":"h2","props":{"id":"page"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" layout is content focused layout. This layout does not render aside menu of table of contents."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This layout accept some configuration from content front-matter."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"fluid"}]},{"type":"text","value":": By setting "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"fluid: true"}]},{"type":"text","value":" in content front-matter the content will be rendered in full width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"constrainedClass"}]},{"type":"text","value":": Using this option you can modify layout container look. Like constraining layout width of changing the background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"padded"}]},{"type":"text","value":": Setting "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"padded: true"}]},{"type":"text","value":" in front-matter will add horizontal padding in the layout."}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"---\ntitle: Home\nlayout: page\nfluid: true\n---\n","filename":"index.md","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"title: Home\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"layout: page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"fluid: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"Home page"}]},{"type":"text","value":" as live sample of page layout"}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"default","depth":2,"text":"default"},{"id":"page","depth":2,"text":"page"}]}},"_type":"markdown","_id":"content:2.api:3.layouts.md","_source":"content","_file":"2.api/3.layouts.md","_stem":"2.api/3.layouts","_extension":"md"}],"navigation":[{"title":"Introduction","_path":"/introduction","children":[{"title":"Getting Started","_path":"/introduction/getting-started"},{"title":"Project Structure","_path":"/introduction/project-structure"},{"title":"Writing Pages","_path":"/introduction/writing-pages"},{"title":"Configuration","_path":"/introduction/configuration"}],"icon":"ph:star-duotone","redirect":"/introduction/getting-started"},{"title":"API","_path":"/api","children":[{"title":"Components","_path":"/api/components"},{"title":"Composables","_path":"/api/composables"},{"title":"Layouts","_path":"/api/layouts"}],"icon":"heroicons-outline:bookmark-alt"}]} \ No newline at end of file +{"generatedAt":1729772106305,"generateTime":840,"contents":[{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"","title":"Home","description":"","navigation":false,"layout":"page","main":{"fluid":false},"body":{"type":"root","children":[{"type":"element","tag":"ellipsis","props":{"blur":"150px","width":"75%","right":"0px"},"children":[]},{"type":"element","tag":"block-hero","props":{":cta":"[\"Get started\",\"/introduction/getting-started\"]",":secondary":"[\"Open on GitHub →\",\"https://github.com/nuxt-themes/docus\"]"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The best place to start your documentation."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write pages in "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Markdown"}]},{"type":"text","value":", use "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Vue"}]},{"type":"text","value":" components and enjoy the power of "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"template","props":{"v-slot:extra":""},"children":[{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"+50 Components"}]},{"type":"text","value":" ready to build rich pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Docs"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Page"}]},{"type":"text","value":" layouts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start from a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"README"}]},{"type":"text","value":", scale to a framework documentation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Navigation and Table of Contents generation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fully configurable design system"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Leverages "},{"type":"element","tag":"a","props":{"href":"https://typography.nuxt.space/","rel":["nofollow"]},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Typography"}]}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://elements.nuxt.dev","rel":["nofollow"]},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Elements"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Used on "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Content Documentation"}]}]}]}]}]},{"type":"element","tag":"template","props":{"v-slot:support":""},"children":[{"type":"element","tag":"terminal","props":{":content":"[\"npx nuxi@latest init -t themes/docus\",\"cd docs\",\"npm install\",\"npm run dev\"]"},"children":[]}]}]},{"type":"element","tag":"card-grid","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What's included"}]}]},{"type":"element","tag":"template","props":{"v-slot:root":""},"children":[{"type":"element","tag":"ellipsis","props":{"blur":"140px","width":"40rem","left":"0px","top":"10rem"},"children":[]}]},{"type":"element","tag":"card","props":{"icon":"logos:nuxt-icon"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Architecture"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Harness the full power of "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" and its "},{"type":"element","tag":"a","props":{"href":"https://modules.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" ecosystem."}]}]}]},{"type":"element","tag":"card","props":{"icon":"IconNuxtStudio"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Studio ready"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Edit your theme content and appearance with live-preview within "},{"type":"element","tag":"a","props":{"href":"https://nuxt.studio","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt Studio"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"card","props":{"icon":"logos:vue"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue Components"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use built-in components (or your own!) inside your content."}]}]}]},{"type":"element","tag":"card","props":{"icon":"simple-icons:markdown"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write Markdown"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Enjoy the ease and simplicity of Markdown and discover "},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/mdc","rel":["nofollow"]},"children":[{"type":"text","value":"MDC syntax"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"card","props":{"icon":"noto:rocket"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Deploy anywhere"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zero config on "},{"type":"element","tag":"a","props":{"href":"https://vercel.com","rel":["nofollow"]},"children":[{"type":"text","value":"Vercel"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://netlify.com","rel":["nofollow"]},"children":[{"type":"text","value":"Netlify"}]},{"type":"text","value":". Choose between static generation, on-demand rendering (Node) or edge-side rendering on "},{"type":"element","tag":"a","props":{"href":"https://workers.cloudflare.com","rel":["nofollow"]},"children":[{"type":"text","value":"CloudFlare workers"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"card","props":{"icon":"noto:puzzle-piece"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Extensible."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Customize the whole design, or add components using slots - you can make Docus your own."}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:0.index.md","_source":"content","_file":"0.index.md","_stem":"0.index","_extension":"md"},{"_path":"/introduction/_dir","_dir":"introduction","_draft":false,"_partial":true,"_locale":"","icon":"ph:star-duotone","navigation":{"redirect":"/introduction/getting-started"},"_id":"content:1.introduction:_dir.yml","_type":"yaml","title":"Dir","_source":"content","_file":"1.introduction/_dir.yml","_stem":"1.introduction/_dir","_extension":"yml"},{"_path":"/introduction/getting-started","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Getting Started","description":"From your Markdown files to a deployed website in few minutes.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"getting-started"},"children":[{"type":"text","value":"Getting Started"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"From your Markdown files to a deployed website in few minutes."}]},{"type":"element","tag":"h2","props":{"id":"play-online"},"children":[{"type":"text","value":"Play online"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can start playing with Docus in your browser using Stackblitz:"}]},{"type":"element","tag":"button-link","props":{":blank":"true","href":"https://stackblitz.com/github/nuxt-themes/docus-starter","icon":"IconStackBlitz","size":"small"},"children":[{"type":"text","value":"Play on StackBlitz"}]},{"type":"element","tag":"h2","props":{"id":"create-a-new-project"},"children":[{"type":"text","value":"Create a new project"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start a fresh Docus project with:"}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npx nuxi@latest init docs -t themes/docus\n","filename":"npx","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npx"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" nuxi@latest"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" init"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docs"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" -t"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" themes/docus\n"}]}]}]}]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Install the dependencies in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" folder:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npm install\n","filename":"npm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"yarn install\n","filename":"yarn","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"pnpm install --shamefully-hoist\n","filename":"pnpm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pnpm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" --shamefully-hoist\n"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Run the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"dev"}]},{"type":"text","value":" command to start Docus in development mode:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npm run dev\n","filename":"npm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" run"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" dev\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"yarn dev\n","filename":"yarn","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" dev\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"pnpm run dev\n","filename":"pnpm","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pnpm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" run"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" dev\n"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"✨ Well done! A browser window should automatically open for "},{"type":"element","tag":"a","props":{"href":"http://localhost:3000","rel":["nofollow"]},"children":[{"type":"text","value":"http://localhost:3000"}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"play-online","depth":2,"text":"Play online"},{"id":"create-a-new-project","depth":2,"text":"Create a new project"}]}},"_type":"markdown","_id":"content:1.introduction:1.getting-started.md","_source":"content","_file":"1.introduction/1.getting-started.md","_stem":"1.introduction/1.getting-started","_extension":"md"},{"_path":"/introduction/project-structure","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Project Structure","description":"Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"project-structure"},"children":[{"type":"text","value":"Project Structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home."}]},{"type":"element","tag":"h2","props":{"id":"directory-structure"},"children":[{"type":"text","value":"Directory Structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the minimal directory structure to get an up and running Docus website."}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"content/\n index.md\napp.config.ts\nnuxt.config.ts\n","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"content/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" index.md\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"app.config.ts\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"nuxt.config.ts\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"content/"}]},{"type":"text","value":" directory is where you "},{"type":"element","tag":"a","props":{"href":"/introduction/writing-pages"},"children":[{"type":"text","value":"write Markdown pages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.ts"}]},{"type":"text","value":" is where you "},{"type":"element","tag":"a","props":{"href":"/introduction/configuration"},"children":[{"type":"text","value":"configure Docus"}]},{"type":"text","value":" to fit your branding and design."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" is your "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/configuration","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt configuration"}]},{"type":"text","value":"."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"directory-structure","depth":2,"text":"Directory Structure"}]}},"_type":"markdown","_id":"content:1.introduction:2.project-structure.md","_source":"content","_file":"1.introduction/2.project-structure.md","_stem":"1.introduction/2.project-structure","_extension":"md"},{"_path":"/introduction/writing-pages","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Writing Pages","description":"Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"writing-pages"},"children":[{"type":"text","value":"Writing Pages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each Markdown page in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"content/"}]},{"type":"text","value":" folder will be mapped to a route."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"File"}]},{"type":"element","tag":"th","props":{"align":"left"},"children":[{"type":"text","value":"Generated route"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"index.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"about.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/about"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"blog/index.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/blog"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"blog/hello.md"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/blog/hello"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"1.guide/2.installation"}]}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/guide/installation"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"frontmatter"},"children":[{"type":"text","value":"Frontmatter"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus supports multiple Front-matter attributes for pages."}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"---\ntitle: \"Get Started\"\ndescription: \"Let's learn how to use my amazing module.\"\n---\n","filename":"index.md","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"title: \"Get Started\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"description: \"Let's learn how to use my amazing module.\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Key"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"layout"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"default"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Use any layout name like you would in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"definePageMeta()"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Defines the page title and H1 in docs pages"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Defines the page description and excerpt in docs pages"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"redirect"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A route path to redirect"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"image"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"OpenGraph cover image"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Docs layout options"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of aside navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"toc"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of table of contents"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of the page header"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"bottom"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of page bottom section"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Navigation options"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"navigation"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggles the visibility of the page or directory in navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"navigation.title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Changes the name of the page or directory in navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"navigation.icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Changes the icon of the page or directory in navigation"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"frontmatter","depth":2,"text":"Frontmatter"}]}},"_type":"markdown","_id":"content:1.introduction:3.writing-pages.md","_source":"content","_file":"1.introduction/3.writing-pages.md","_stem":"1.introduction/3.writing-pages","_extension":"md"},{"_path":"/introduction/configuration","_dir":"introduction","_draft":false,"_partial":false,"_locale":"","title":"Configuration","description":"Learn how to configure Docus.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Learn how to configure Docus."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"export default defineAppConfig({\n docus: {\n title: 'Docus',\n description: 'My Docus Project',\n url: 'http://docus.dev'\n }\n})\n","filename":"Minimal app.config.ts","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineAppConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" docus: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" description: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'My Docus Project'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" url: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'http://docus.dev'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"export default defineAppConfig({\n docus: {\n title: 'Docus',\n description: 'My Docus Project',\n url: 'http://docus.dev',\n image: '/social-card-preview.png',\n socials: {\n twitter: '@nuxt_js',\n github: 'nuxt-themes/docus',\n },\n github: {\n root: 'content',\n edit: true,\n contributors: false\n },\n layout: 'default',\n aside: {\n level: 1,\n filter: [],\n },\n header: {\n title: false,\n logo: true,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus',\n text: 'Powered by Docus',\n href: 'https://docus.dev',\n },\n textLinks: [\n {\n text: 'Nuxt',\n href: 'https://nuxt.com',\n target: '_blank',\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS',\n href: 'https://nuxtjs.org',\n component: 'IconNuxtLabs',\n },\n {\n label: 'Vue Telescope',\n href: 'https://vuetelescope.com',\n component: 'IconVueTelescope',\n },\n ],\n }\n }\n})\n","filename":"Complete app.config.ts","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineAppConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" docus: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" description: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'My Docus Project'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" url: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'http://docus.dev'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" image: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'/social-card-preview.png'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" socials: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" twitter: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'@nuxt_js'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" github: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'nuxt-themes/docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" github: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" root: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'content'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" edit: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" contributors: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" layout: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'default'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" aside: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" level: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" filter: [],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" header: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" title: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" logo: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" showLinkIcon: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" footer: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" credits: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" icon: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'IconDocus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" text: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Powered by Docus'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://docus.dev'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" textLinks: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" text: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Nuxt'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://nuxt.com'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" target: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'_blank'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" rel: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'noopener'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":38},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":39},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":40},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" iconLinks: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":41},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":42},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" label: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'NuxtJS'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":43},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://nuxtjs.org'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":44},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" component: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'IconNuxtLabs'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":45},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":46},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":47},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" label: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'Vue Telescope'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":48},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" href: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'https://vuetelescope.com'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":49},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" component: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"'IconVueTelescope'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":50},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":51},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":52},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":53},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":54},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Key"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default"}]}]},{"type":"element","tag":"th","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Description"}]}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Docus"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website title"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"titleTemplate"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Docus"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website title template"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"My Docus Project"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website description"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"url"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Website URL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"layout"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fallback layout to use (supports "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Socials"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{}"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Social links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.github"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The repository to use on GitHub links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.twitter"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Twitter links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.youtube"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The channel to use on Youtube links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.instagram"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Instagram links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.facebook"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Facebook links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.medium"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The account to use on Medium links"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social]"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Override social or display custom one"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].label"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A label to use for the social"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A icon to use for the social"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].href"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A link to use for the social"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"socials.[social].rel"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"noopener noreferrer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A space-separated list of "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","rel":["nofollow"]},"children":[{"type":"text","value":"link types"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Header"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Header configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.logo"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Whether or not to use "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Logo.vue"}]},{"type":"text","value":" as the header logo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.title"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"If set to a string, will be used in the header"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.showLinkIcon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"If set to "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" links icons will show in the header"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.exclude"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string[]"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of path to exclude out from the header navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header.fluid"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make header "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Main"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Main configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main.fluid"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make main content "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main.padded"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make main content "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" padded"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Aside"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Aside configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside.level"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Aside base level of nesting"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside.collapsed"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Will be used as default value for collapsible navigation categories"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside.exclude"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string[]"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of path to exclude out from the aside navigation"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Footer"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Footer configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.credits"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An object defining the bottom left credits"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.credits.icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The icon to use for the credits"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.credits.text"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The text to use for the credits"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"array"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[]"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of texts to display at the center of footer"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].text"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The text to display"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].href"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A link to use for the text"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].target"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"_self"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Where to display the linked URL, as the name for a browsing context"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.textLinks[0].rel"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"noopener noreferrer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A space-separated list of "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","rel":["nofollow"]},"children":[{"type":"text","value":"link types"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"array"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[]"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"An array of icons to display in the footer"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].label"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A label to use for the icon"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].href"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A link to use for the icon"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].icon"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"The icon to use (can be a component name)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.iconLinks[0].rel"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"noopener noreferrer"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"A space-separated list of "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types","rel":["nofollow"]},"children":[{"type":"text","value":"link types"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer.fluid"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Make footer "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Container"}]},{"type":"text","value":" fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"GitHub integration configuration"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.dir"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Directory containing the files to be edited"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.branch"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Branch to start editing"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.repo"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Name of the GitHub repo to edit files"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.owner"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Owner of the repo"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"github.edit"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Toggle \"Edit this page on Github\" component on documentation pages"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Search"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"fuse"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"useFuse "},{"type":"element","tag":"a","props":{"href":"https://vueuse.org/integrations/useFuse/","rel":["nofollow"]},"children":[{"type":"text","value":"options"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"customizing-the-logo"},"children":[{"type":"text","value":"Customizing the logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To update the logo in the header, create a component in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"components/Logo.vue"}]},{"type":"text","value":" with your own logo."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this example, the image is located at "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/public/img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"className":"language-vue shiki shiki-themes github-dark github-light","code":"\n","filename":"components/Logo.vue","language":"vue","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" width"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"\"120\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" src"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"\"/img/YOURLOGO.png\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"/>\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"customizing-the-logo","depth":2,"text":"Customizing the logo"}]}},"_type":"markdown","_id":"content:1.introduction:4.configuration.md","_source":"content","_file":"1.introduction/4.configuration.md","_stem":"1.introduction/4.configuration","_extension":"md"},{"_path":"/api/_dir","_dir":"api","_draft":false,"_partial":true,"_locale":"","title":"API","icon":"heroicons-outline:bookmark-alt","_id":"content:2.api:_dir.yml","_type":"yaml","_source":"content","_file":"2.api/_dir.yml","_stem":"2.api/_dir","_extension":"yml"},{"_path":"/api/components","_dir":"api","_draft":false,"_partial":false,"_locale":"","title":"Components","description":"Discover every component you can use in your content.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"components"},"children":[{"type":"text","value":"Components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Discover every component you can use in your content."}]},{"type":"element","tag":"h2","props":{"id":"alert"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"alert","props":{"type":"info","style":"margin-top: 0;"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"info"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"alert","props":{"type":"success"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"success"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"warning"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"alert","props":{"type":"danger","style":"margin-bottom: 0;"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"danger"}]},{"type":"text","value":" alert with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" and a "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"link"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::alert{type=\"info\"}\nCheck out an **info** alert with `code` and a [link](/).\n::\n\n::alert{type=\"success\"}\nCheck out a **success** alert with `code` and a [link](/).\n::\n\n::alert{type=\"warning\"}\nCheck out a **warning** alert with `code` and a [link](/).\n::\n\n::alert{type=\"danger\"}\nCheck out a **danger** alert with `code` and a [link](/).\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"info\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out an "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**info**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"success\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out a "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**success**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out a "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**warning**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::alert{type=\"danger\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Check out a "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**danger**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" alert with "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"`code`"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and a ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"link"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":").\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Alert.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"badge"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":" support same types as "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":"."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"div","props":{"style":"display:flex; gap: 1rem;"},"children":[{"type":"element","tag":"badge","props":{},"children":[{"type":"text","value":"v1.2"}]},{"type":"element","tag":"badge","props":{"type":"warning"},"children":[{"type":"text","value":"Deprecated"}]},{"type":"element","tag":"badge","props":{"type":"danger"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not found!"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":badge[v1.2]\n\n:badge[Deprecated]{type=\"warning\"}\n\n::badge{type=\"danger\"}\nNot found!\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":badge["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"v1.2"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":badge["}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"Deprecated"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"]{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::badge{type=\"danger\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Not found!\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Badge.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"blockhero"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"block-hero","props":{":cta":"[\"Get started\",\"/introduction/getting-started\"]",":secondary":"[\"Open on GitHub →\",\"https://github.com/nuxtlabs/docus\"]","snippet":"npx nuxi@latest init docus-app -t nuxtlabs/docus-starter"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Document-driven framework"}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites."}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::block-hero\n---\ncta:\n - Get started\n - /get-started\nsecondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\nsnippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n---\n#title\nDocument-driven framework\n\n#description\nDocus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::block-hero\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"cta:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Get started\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" /get-started\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"secondary:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Open on GitHub →\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":" -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" https://github.com/nuxtlabs/docus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Document-driven framework\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/BlockHero.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"buttonlink"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"button-link","props":{":blank":"true","href":"https://stackblitz.com/github/nuxtlabs/docus-starter","icon":"IconStackBlitz"},"children":[{"type":"text","value":"Play on StackBlitz"}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/ButtonLink.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"callout"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":" support same types as "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":"."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"callout","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:summary":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a callout! Click me to open."}]}]},{"type":"element","tag":"template","props":{"v-slot:content":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the content of the callout."}]}]}]},{"type":"element","tag":"callout","props":{"type":"warning"},"children":[{"type":"element","tag":"template","props":{"v-slot:summary":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a callout! Click me to open."}]}]},{"type":"element","tag":"template","props":{"v-slot:content":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the content of the callout."}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::callout\n#summary\nThis is a callout! Click me to open.\n\n#content\nThis is the content of the callout.\n::\n \n::callout{type=\"warning\"}\n#summary\nThis is a callout! Click me to open.\n\n#content\nThis is the content of the callout.\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::callout\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#summary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is a callout! Click me to open.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#content\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is the content of the callout.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::callout{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#summary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is a callout! Click me to open.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#content\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"This is the content of the callout.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Callout.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"card"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"card","props":{"icon":"logos:nuxt-icon"},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Architecture."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Nuxt Content"}]},{"type":"text","value":". "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nUse Nuxt to build a static site, or a serverless app."}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":" ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content**. :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card{icon=\"logos:nuxt-icon\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Nuxt Architecture.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Based on "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**Nuxt 3**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" and "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**Nuxt Content**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":". :br\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Use Nuxt to build a static site, or a serverless app.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Card.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"cardgrid"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview"},"children":[{"type":"element","tag":"card-grid","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What's included?"}]}]},{"type":"element","tag":"template","props":{"v-slot:root":""},"children":[{"type":"element","tag":"ellipsis","props":{},"children":[]}]},{"type":"element","tag":"card","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Architecture."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Harness the full power of Nuxt and the Nuxt ecosystem."}]}]}]},{"type":"element","tag":"card","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue Components."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use built-in components (or your own!) inside your content."}]}]}]},{"type":"element","tag":"card","props":{},"children":[{"type":"element","tag":"template","props":{"v-slot:title":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Write Markdown."}]}]},{"type":"element","tag":"template","props":{"v-slot:description":""},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Enjoy the ease and simplicity of Markdown and discover MDC syntax."}]}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::card-grid\n#title\nWhat's included\n\n#root\n:ellipsis\n\n#default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::card-grid\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"What's included\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#root\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":ellipsis\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"#default\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Nuxt Architecture.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Harness the full power of Nuxt and the Nuxt ecosystem.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Vue Components.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Use built-in components (or your own!) inside your content.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::card\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #title\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Write Markdown.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" #description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CardGrid.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"codegroup"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component uses "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"slots"}]},{"type":"text","value":" to create a tab panel of your code examples or preview."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"yarn add docus\n","filename":"Yarn","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" add"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-bash shiki shiki-themes github-dark github-light","code":"npm install docus\n","filename":"NPM","language":"bash","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::code-group\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```bash [Yarn]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" yarn"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" add"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```bash [NPM]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" install"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":" docus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ```\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CodeGroup.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"codeblock"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To be used inside a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]},{"type":"text","value":" component to display a preview of some rendered code."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"badge","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hello World!"}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"/* Added as a child of `` */\n\n::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"/* Added as a child of "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"``"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" */\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::code-block{label=\"Preview\" preview}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::badge\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Hello World!\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CodeBlock.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"copybutton"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"copy-button","props":{"content":"hey!"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":copy-button{content=\"hey!\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":copy-button{content=\"hey!\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/CopyButton.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"icon"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icon component gives you access to all "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"100,000+"}]},{"type":"text","value":" icons from "},{"type":"element","tag":"a","props":{"href":"https://icones.js.org","rel":["nofollow"]},"children":[{"type":"text","value":"icones.js.org"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"icon","props":{"name":"logos:nuxt-icon"},"children":[]},{"type":"element","tag":"icon","props":{"name":"logos:vue"},"children":[]},{"type":"element","tag":"icon","props":{"name":"logos:nuxt-icon"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":icon{name=\"logos:nuxt-icon\"}\n:icon{name=\"logos:vue\"}\n:icon{name=\"logos:nuxt-icon\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":icon{name=\"logos:nuxt-icon\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":icon{name=\"logos:vue\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":icon{name=\"logos:nuxt-icon\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Icon.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"list"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"list","props":{"type":"primary"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always"}]}]}]},{"type":"element","tag":"list","props":{"type":"success"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Amazing"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Congrats"}]}]}]},{"type":"element","tag":"list","props":{"type":"info"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do you know?"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can also do this"}]}]}]},{"type":"element","tag":"list","props":{"type":"warning"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Be careful"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with precautions"}]}]}]},{"type":"element","tag":"list","props":{"type":"danger"},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Drinking too much"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Driving drunk"}]}]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::list{type=\"primary\"}\n- **Important**\n- Always\n::\n\n::list{type=\"success\"}\n- Amazing\n- Congrats\n::\n\n::list{type=\"info\"}\n- Do you know?\n- You can also do this\n::\n\n::list{type=\"warning\"}\n- Be careful\n- Use with precautions\n::\n\n::list{type=\"danger\"}\n- Drinking too much\n- Driving drunk\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"primary\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":" **Important**\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Always\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"success\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Amazing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Congrats\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"info\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Do you know?\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" You can also do this\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"warning\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Be careful\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Use with precautions\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::list{type=\"danger\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Drinking too much\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#FFAB70;--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" Driving drunk\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/List.vue"},"children":[]},{"type":"element","tag":"h2","props":{"id":"sandbox"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Embed CodeSandbox/StackBlitz easily in your documentation with great performances."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API","rel":["nofollow"]},"children":[{"type":"text","value":"IntersectionObserver"}]},{"type":"text","value":" to load when visible in the viewport."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"sandbox","props":{"src":"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Sandbox.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"terminal"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"terminal","props":{"content":"nuxi build"},"children":[]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":":terminal{content=\"nuxi build\"}\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":":terminal{content=\"nuxi build\"}\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/Terminal.vue"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"videoplayer"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code-block","props":{"label":"Preview",":preview":"true","preview":""},"children":[{"type":"element","tag":"div","props":{},"children":[{"type":"element","tag":"video-player","props":{"src":"https://www.youtube.com/watch?v=o9e12WbKrd8"},"children":[]}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n::\n","filename":"Code","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::div\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"components/content/VideoPlayer.vue"},"children":[]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"alert","depth":2,"text":""},{"id":"badge","depth":2,"text":""},{"id":"blockhero","depth":2,"text":""},{"id":"buttonlink","depth":2,"text":""},{"id":"callout","depth":2,"text":""},{"id":"card","depth":2,"text":""},{"id":"cardgrid","depth":2,"text":""},{"id":"codegroup","depth":2,"text":""},{"id":"codeblock","depth":2,"text":""},{"id":"copybutton","depth":2,"text":""},{"id":"icon","depth":2,"text":""},{"id":"list","depth":2,"text":""},{"id":"sandbox","depth":2,"text":""},{"id":"terminal","depth":2,"text":""},{"id":"videoplayer","depth":2,"text":""}]}},"_type":"markdown","_id":"content:2.api:1.components.md","_source":"content","_file":"2.api/1.components.md","_stem":"2.api/1.components","_extension":"md"},{"_path":"/api/composables","_dir":"api","_draft":false,"_partial":false,"_locale":"","title":"Composables","description":"Discover the Docus composables to use in your custom Vue components and pages.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"composables"},"children":[{"type":"text","value":"Composables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Discover the Docus composables to use in your custom Vue components and pages."}]},{"type":"element","tag":"h2","props":{"id":"usedocus"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useDocus()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":"language-ts shiki shiki-themes github-dark github-light","language":"ts","style":""},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":"useDocus"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()"}]}]},{"type":"text","value":" gives access to docus runtime config, all default values and your custom config from "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.ts"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"config"}]},{"type":"text","value":" refers to the merged config of the current page."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"main"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"header"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"footer"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"titleTemplate"}]},{"type":"text","value":" can be set from "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"_dir.yml"}]},{"type":"text","value":" and any "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page.md"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The configs in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config"}]},{"type":"text","value":" file will be used as defaults."}]},{"type":"element","tag":"pre","props":{"className":"language-vue shiki shiki-themes github-dark github-light","code":"\n\n\n","language":"vue","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useDocus"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"h1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">{{ config.title }}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">{{ config.description }}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"tree"}]},{"type":"text","value":" refers to the current navigation tree that is displayed in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside"}]},{"type":"text","value":" component."}]}]},{"type":"element","tag":"pre","props":{"className":"language-vue shiki shiki-themes github-dark github-light","code":"\n\n\n","language":"vue","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":"tree"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useDocus"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#85E89D;--shiki-default:#22863A"},"children":[{"type":"text","value":"DocsAsideTree"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" :links"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#9ECBFF;--shiki-default:#032F62"},"children":[{"type":"text","value":"\"tree\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"\n"}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"composables/useDocus.ts"},"children":[]},{"type":"element","tag":"h2","props":{"id":"usemenu"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useMenu()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useMenu()"}]},{"type":"text","value":" gives access to "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"$menu"}]},{"type":"text","value":" plugin controlling mobile navigation globally."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"const {\n // Is menu visible\n visible,\n // Close menu function\n close,\n // Open menu function\n open,\n // Toggle menu function\n toggle\n} = useMenu()\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Is menu visible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" visible"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Close menu function\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" close"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Open menu function\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" open"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Toggle menu function\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" toggle\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useMenu"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"composables/useMenu.ts"},"children":[]},{"type":"element","tag":"h2","props":{"id":"usescrollspy"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useScrollspy()"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"useScrollspy()"}]},{"type":"text","value":" is used in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"docs"}]},{"type":"text","value":" layout to make the ToC display the currently visible headings."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-dark github-light","code":"const {\n // Headings on the page\n visibleHeadings,\n // Active headings (for the current page)\n activeHeadings,\n // Update headings (an array of DOM nodes)\n updateHeadings\n} = useScrollspy()\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Headings on the page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" visibleHeadings"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Active headings (for the current page)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" activeHeadings"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#6A737D;--shiki-default:#6A737D"},"children":[{"type":"text","value":" // Update headings (an array of DOM nodes)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-default:#005CC5"},"children":[{"type":"text","value":" updateHeadings\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#F97583;--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#B392F0;--shiki-default:#6F42C1"},"children":[{"type":"text","value":" useScrollspy"}]},{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"()\n"}]}]}]}]},{"type":"element","tag":"source-link","props":{"source":"composables/useScrollspy.ts"},"children":[]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usedocus","depth":2,"text":"useDocus()"},{"id":"usemenu","depth":2,"text":"useMenu()"},{"id":"usescrollspy","depth":2,"text":"useScrollspy()"}]}},"_type":"markdown","_id":"content:2.api:2.composables.md","_source":"content","_file":"2.api/2.composables.md","_stem":"2.api/2.composables","_extension":"md"},{"_path":"/api/layouts","_dir":"api","_draft":false,"_partial":false,"_locale":"","title":"Layouts","description":"Docus provides multiple built-in layouts for displaying your Markdown pages.","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"layouts"},"children":[{"type":"text","value":"Layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Docus provides multiple built-in layouts for displaying your Markdown pages."}]},{"type":"element","tag":"h2","props":{"id":"default"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"default"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default layout for every page created in the project. This layout renders multiple section alongside the content:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Aside navigation menu (togglable with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"aside: false/true"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Page bottom section (togglable with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"bottom: false/true"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Table of content (togglable with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"toc: false/true"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"---\naside: true\nbottom: true\ntoc: false\n---\n\nYour awesome content\n","filename":"index.md","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"aside: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"bottom: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"toc: false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"Your awesome content\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Current page is live sample of default layout."}]},{"type":"element","tag":"h2","props":{"id":"page"},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" layout is content focused layout. This layout does not render aside menu of table of contents."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This layout accept some configuration from content front-matter."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"fluid"}]},{"type":"text","value":": By setting "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"fluid: true"}]},{"type":"text","value":" in content front-matter the content will be rendered in full width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"constrainedClass"}]},{"type":"text","value":": Using this option you can modify layout container look. Like constraining layout width of changing the background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"padded"}]},{"type":"text","value":": Setting "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"padded: true"}]},{"type":"text","value":" in front-matter will add horizontal padding in the layout."}]}]},{"type":"element","tag":"pre","props":{"className":"language-md shiki shiki-themes github-dark github-light","code":"---\ntitle: Home\nlayout: page\nfluid: true\n---\n","filename":"index.md","language":"md","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"title: Home\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"layout: page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#E1E4E8;--shiki-default:#24292E"},"children":[{"type":"text","value":"fluid: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"/"},"children":[{"type":"text","value":"Home page"}]},{"type":"text","value":" as live sample of page layout"}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"default","depth":2,"text":"default"},{"id":"page","depth":2,"text":"page"}]}},"_type":"markdown","_id":"content:2.api:3.layouts.md","_source":"content","_file":"2.api/3.layouts.md","_stem":"2.api/3.layouts","_extension":"md"}],"navigation":[{"title":"Introduction","_path":"/introduction","children":[{"title":"Getting Started","_path":"/introduction/getting-started"},{"title":"Project Structure","_path":"/introduction/project-structure"},{"title":"Writing Pages","_path":"/introduction/writing-pages"},{"title":"Configuration","_path":"/introduction/configuration"}],"icon":"ph:star-duotone","redirect":"/introduction/getting-started"},{"title":"API","_path":"/api","children":[{"title":"Components","_path":"/api/components"},{"title":"Composables","_path":"/api/composables"},{"title":"Layouts","_path":"/api/layouts"}],"icon":"heroicons-outline:bookmark-alt"}]} \ No newline at end of file diff --git a/api/_content/navigation/i5pZc4XEtQ.1729770320074.json b/api/_content/navigation/i5pZc4XEtQ.1729772074176.json similarity index 100% rename from api/_content/navigation/i5pZc4XEtQ.1729770320074.json rename to api/_content/navigation/i5pZc4XEtQ.1729772074176.json diff --git a/api/_content/query/0CgxMh2nDn.1729770320074.json b/api/_content/query/0CgxMh2nDn.1729772074176.json similarity index 100% rename from api/_content/query/0CgxMh2nDn.1729770320074.json rename to api/_content/query/0CgxMh2nDn.1729772074176.json diff --git a/api/_content/query/7Urzh1YKyd.1729770320074.json b/api/_content/query/7Urzh1YKyd.1729772074176.json similarity index 100% rename from api/_content/query/7Urzh1YKyd.1729770320074.json rename to api/_content/query/7Urzh1YKyd.1729772074176.json diff --git a/api/_content/query/J6CbOKjTtF.1729770320074.json b/api/_content/query/J6CbOKjTtF.1729772074176.json similarity index 100% rename from api/_content/query/J6CbOKjTtF.1729770320074.json rename to api/_content/query/J6CbOKjTtF.1729772074176.json diff --git a/api/_content/query/V00Igf0DWw.1729770320074.json b/api/_content/query/V00Igf0DWw.1729772074176.json similarity index 100% rename from api/_content/query/V00Igf0DWw.1729770320074.json rename to api/_content/query/V00Igf0DWw.1729772074176.json diff --git a/api/_content/query/YMDqQWwJgh.1729770320074.json b/api/_content/query/YMDqQWwJgh.1729772074176.json similarity index 100% rename from api/_content/query/YMDqQWwJgh.1729770320074.json rename to api/_content/query/YMDqQWwJgh.1729772074176.json diff --git a/api/_content/query/ZiCQvEvXdQ.1729770320074.json b/api/_content/query/ZiCQvEvXdQ.1729772074176.json similarity index 100% rename from api/_content/query/ZiCQvEvXdQ.1729770320074.json rename to api/_content/query/ZiCQvEvXdQ.1729772074176.json diff --git a/api/_content/query/gYTg1qm5z9.1729770320074.json b/api/_content/query/gYTg1qm5z9.1729772074176.json similarity index 100% rename from api/_content/query/gYTg1qm5z9.1729770320074.json rename to api/_content/query/gYTg1qm5z9.1729772074176.json diff --git a/api/_content/query/iPPK42uftG.1729770320074.json b/api/_content/query/iPPK42uftG.1729772074176.json similarity index 100% rename from api/_content/query/iPPK42uftG.1729770320074.json rename to api/_content/query/iPPK42uftG.1729772074176.json diff --git a/api/_content/query/nD3Cndsf75.1729770320074.json b/api/_content/query/nD3Cndsf75.1729772074176.json similarity index 100% rename from api/_content/query/nD3Cndsf75.1729770320074.json rename to api/_content/query/nD3Cndsf75.1729772074176.json diff --git a/api/_content/query/oWHhTkscLk.1729770320074.json b/api/_content/query/oWHhTkscLk.1729772074176.json similarity index 100% rename from api/_content/query/oWHhTkscLk.1729770320074.json rename to api/_content/query/oWHhTkscLk.1729772074176.json diff --git a/api/_content/query/oe5ePHh1cO.1729770320074.json b/api/_content/query/oe5ePHh1cO.1729772074176.json similarity index 100% rename from api/_content/query/oe5ePHh1cO.1729770320074.json rename to api/_content/query/oe5ePHh1cO.1729772074176.json diff --git a/api/_content/query/q2mdNd9VsI.1729770320074.json b/api/_content/query/q2mdNd9VsI.1729772074176.json similarity index 100% rename from api/_content/query/q2mdNd9VsI.1729770320074.json rename to api/_content/query/q2mdNd9VsI.1729772074176.json diff --git a/api/_content/query/rwgJyfNFnO.1729770320074.json b/api/_content/query/rwgJyfNFnO.1729772074176.json similarity index 100% rename from api/_content/query/rwgJyfNFnO.1729770320074.json rename to api/_content/query/rwgJyfNFnO.1729772074176.json diff --git a/api/_content/query/wUs5bEeTmH.1729770320074.json b/api/_content/query/wUs5bEeTmH.1729772074176.json similarity index 100% rename from api/_content/query/wUs5bEeTmH.1729770320074.json rename to api/_content/query/wUs5bEeTmH.1729772074176.json diff --git a/api/_content/query/wpKuH5qQWk.1729770320074.json b/api/_content/query/wpKuH5qQWk.1729772074176.json similarity index 100% rename from api/_content/query/wpKuH5qQWk.1729770320074.json rename to api/_content/query/wpKuH5qQWk.1729772074176.json diff --git a/api/_content/query/zzlzp4TxDt.1729770320074.json b/api/_content/query/zzlzp4TxDt.1729772074176.json similarity index 100% rename from api/_content/query/zzlzp4TxDt.1729770320074.json rename to api/_content/query/zzlzp4TxDt.1729772074176.json diff --git a/api/components/_payload.json b/api/components/_payload.json index 0945a0cf9..023cf4898 100644 --- a/api/components/_payload.json +++ b/api/components/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355163] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107426] \ No newline at end of file diff --git a/api/components/index.html b/api/components/index.html index 4d2803913..62b349549 100644 --- a/api/components/index.html +++ b/api/components/index.html @@ -32,7 +32,7 @@ - + @@ -95,7 +95,7 @@ -

Components

Discover every component you can use in your content.

<Alert />

Check out an info alert with code and a link.
Check out a success alert with code and a link.
Check out a warning alert with code and a link.
Check out a danger alert with code and a link.
Code
::alert{type="info"}
+
Components
Discover every component you can use in your content.
<Alert />
Check out an info alert with code and a link.
Check out a success alert with code and a link.
Check out a warning alert with code and a link.
Check out a danger alert with code and a link.
Code
::alert{type="info"}
 Check out an **info** alert with `code` and a [link](/).
 ::
 
@@ -117,7 +117,7 @@
 ::badge{type="danger"}
 Not found!
 ::
-
<BlockHero />
Document-driven framework
Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.
Get startedOpen on GitHub →
 Bash 
$npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
 Click to copy 
Code
::block-hero
+
<BlockHero />
Document-driven framework
Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.
Get startedOpen on GitHub →
 Bash 
$npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
 Click to copy 
Code
::block-hero
 ---
 cta:
   - Get started
@@ -133,7 +133,7 @@
 #description
 Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.
 ::
-
Code
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
+
Code
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
 
<Callout />
<Callout /> support same types as <Alert />.
This is a callout! Click me to open.
This is a callout! Click me to open.
Code
::callout
 #summary
 This is a callout! Click me to open.
@@ -157,7 +157,7 @@
  Based on **Nuxt 3** and **Nuxt Content**. :br
  Use Nuxt to build a static site, or a serverless app.
  ::
-
<CardGrid />
What's included?
Nuxt Architecture.
Harness the full power of Nuxt and the Nuxt ecosystem.
Vue Components.
Use built-in components (or your own!) inside your content.
Write Markdown.
Enjoy the ease and simplicity of Markdown and discover MDC syntax.
Code
::card-grid
+
<CardGrid />
What's included?
Nuxt Architecture.
Harness the full power of Nuxt and the Nuxt ecosystem.
Vue Components.
Use built-in components (or your own!) inside your content.
Write Markdown.
Enjoy the ease and simplicity of Markdown and discover MDC syntax.
Code
::card-grid
 #title
 What's included
 
@@ -234,5 +234,5 @@
 
<VideoPlayer />
Code
::div
   :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
 ::
-
 Edit this page on GitHub 
Table of Contents

-
\ No newline at end of file
+

Edit this page on GitHub
Table of Contents
+ \ No newline at end of file diff --git a/api/composables/_payload.json b/api/composables/_payload.json index a3e3eaecd..57e2bc011 100644 --- a/api/composables/_payload.json +++ b/api/composables/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355175] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107437] \ No newline at end of file diff --git a/api/composables/index.html b/api/composables/index.html index 41c21ecbb..7947b4695 100644 --- a/api/composables/index.html +++ b/api/composables/index.html @@ -20,7 +20,7 @@ - + @@ -66,7 +66,7 @@ -

Composables

Discover the Docus composables to use in your custom Vue components and pages.

useDocus()

useDocus() gives access to docus runtime config, all default values and your custom config from app.config.ts

  • config refers to the merged config of the current page.

main, header, aside, footer and titleTemplate can be set from _dir.yml and any page.md file.

The configs in app.config file will be used as defaults.

<script setup>
+
Composables
Discover the Docus composables to use in your custom Vue components and pages.
useDocus()
useDocus() gives access to docus runtime config, all default values and your custom config from app.config.ts
  • config refers to the merged config of the current page.
main, header, aside, footer and titleTemplate can be set from _dir.yml and any page.md file.
The configs in app.config file will be used as defaults.
<script setup>
 const { config } = useDocus()
 </script>
 
@@ -101,5 +101,5 @@
   // Update headings (an array of DOM nodes)
   updateHeadings
 } = useScrollspy()
-
 Edit this page on GitHub 
Table of Contents

-
\ No newline at end of file
+

Edit this page on GitHub
Table of Contents
+ \ No newline at end of file diff --git a/api/layouts/_payload.json b/api/layouts/_payload.json index 2c7a872f2..6bb68b2fa 100644 --- a/api/layouts/_payload.json +++ b/api/layouts/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355187] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107448] \ No newline at end of file diff --git a/api/layouts/index.html b/api/layouts/index.html index a5aa8842d..4fd49704c 100644 --- a/api/layouts/index.html +++ b/api/layouts/index.html @@ -20,7 +20,7 @@ - + @@ -65,7 +65,7 @@ -

Layouts

Docus provides multiple built-in layouts for displaying your Markdown pages.

default

The default layout for every page created in the project. This layout renders multiple section alongside the content:

  • Aside navigation menu (togglable with aside: false/true)
  • Page bottom section (togglable with bottom: false/true)
  • Table of content (togglable with toc: false/true)
index.md
---
+
Layouts
Docus provides multiple built-in layouts for displaying your Markdown pages.
default
The default layout for every page created in the project. This layout renders multiple section alongside the content:
  • Aside navigation menu (togglable with aside: false/true)
  • Page bottom section (togglable with bottom: false/true)
  • Table of content (togglable with toc: false/true)
index.md
---
 aside: true
 bottom: true
 toc: false
@@ -77,5 +77,5 @@
 layout: page
 fluid: true
 ---
-
Check Home page as live sample of page layout
 Edit this page on GitHub 
Table of Contents

-
\ No newline at end of file
+

Check Home page as live sample of page layout

Edit this page on GitHub
Table of Contents
+ \ No newline at end of file diff --git a/index.html b/index.html index 4e6a142f4..2fc3392f2 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - + @@ -71,5 +71,5 @@ -

The best place to start your documentation.

Write pages in Markdown, use Vue components and enjoy the power of Nuxt.

  • +50 Components ready to build rich pages
  • Docs and Page layouts
  • Start from a README, scale to a framework documentation
  • Navigation and Table of Contents generation
  • Fully configurable design system
  • Leverages Typography and Elements
  • Used on Content Documentation
Get startedOpen on GitHub →
Bash
$npx nuxi@latest init -t themes/docus$cd docs$npm install$npm run dev
Click to copy

What's included

Nuxt Architecture

Harness the full power of Nuxt 3 and its modules ecosystem.

Nuxt Studio ready

Edit your theme content and appearance with live-preview within Nuxt Studio.

Vue Components

Use built-in components (or your own!) inside your content.

Write Markdown

Enjoy the ease and simplicity of Markdown and discover MDC syntax.

Deploy anywhere

Zero config on Vercel or Netlify. Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers.

Extensible.

Customize the whole design, or add components using slots - you can make Docus your own.

- \ No newline at end of file +

The best place to start your documentation.

Write pages in Markdown, use Vue components and enjoy the power of Nuxt.

  • +50 Components ready to build rich pages
  • Docs and Page layouts
  • Start from a README, scale to a framework documentation
  • Navigation and Table of Contents generation
  • Fully configurable design system
  • Leverages Typography and Elements
  • Used on Content Documentation
Get startedOpen on GitHub →
Bash
$npx nuxi@latest init -t themes/docus$cd docs$npm install$npm run dev
Click to copy

What's included

Nuxt Architecture

Harness the full power of Nuxt 3 and its modules ecosystem.

Nuxt Studio ready

Edit your theme content and appearance with live-preview within Nuxt Studio.

Vue Components

Use built-in components (or your own!) inside your content.

Write Markdown

Enjoy the ease and simplicity of Markdown and discover MDC syntax.

Deploy anywhere

Zero config on Vercel or Netlify. Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers.

Extensible.

Customize the whole design, or add components using slots - you can make Docus your own.

+ \ No newline at end of file diff --git a/introduction/configuration/_payload.json b/introduction/configuration/_payload.json index 688bedcde..819bf4322 100644 --- a/introduction/configuration/_payload.json +++ b/introduction/configuration/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355145] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107414] \ No newline at end of file diff --git a/introduction/configuration/index.html b/introduction/configuration/index.html index 4eb5f4b33..0e3ac2c81 100644 --- a/introduction/configuration/index.html +++ b/introduction/configuration/index.html @@ -26,7 +26,7 @@ - + @@ -78,7 +78,7 @@ -

Configuration

Learn how to configure Docus.

Minimal app.config.ts
export default defineAppConfig({
+
Configuration
Learn how to configure Docus.
Minimal app.config.ts
export default defineAppConfig({
   docus: {
     title: 'Docus',
     description: 'My Docus Project',
@@ -142,5 +142,5 @@
 
KeyTypeDefaultDescription
titlestringDocusWebsite title
titleTemplatestringDocusWebsite title template
descriptionstringMy Docus ProjectWebsite description
urlstringWebsite URL
layoutstringdefaultFallback layout to use (supports default or page)
Socials
socialsobject{}Social links
socials.githubstringThe repository to use on GitHub links
socials.twitterstringThe account to use on Twitter links
socials.youtubestringThe channel to use on Youtube links
socials.instagramstringThe account to use on Instagram links
socials.facebookstringThe account to use on Facebook links
socials.mediumstringThe account to use on Medium links
socials.[social]objectOverride social or display custom one
socials.[social].labelstringA label to use for the social
socials.[social].iconstringA icon to use for the social
socials.[social].hrefstringA link to use for the social
socials.[social].relstringnoopener noreferrerA space-separated list of link types
Header
headerobjectHeader configuration
header.logobooleanWhether or not to use Logo.vue as the header logo
header.titlestringIf set to a string, will be used in the header
header.showLinkIconbooleanIf set to true links icons will show in the header
header.excludestring[]An array of path to exclude out from the header navigation
header.fluidbooleantrueMake header Container fluid
Main
mainobjectMain configuration
main.fluidbooleantrueMake main content Container fluid
main.paddedbooleantrueMake main content Container padded
Aside
asideobjectAside configuration
aside.levelstring0Aside base level of nesting
aside.collapsedbooleanWill be used as default value for collapsible navigation categories
aside.excludestring[]An array of path to exclude out from the aside navigation
Footer
footerobjectFooter configuration
footer.creditsobjectAn object defining the bottom left credits
footer.credits.iconobjectThe icon to use for the credits
footer.credits.textobjectThe text to use for the credits
footer.textLinksarray[]An array of texts to display at the center of footer
footer.textLinks[0].textstringThe text to display
footer.textLinks[0].hrefstringA link to use for the text
footer.textLinks[0].targetstring_selfWhere to display the linked URL, as the name for a browsing context
footer.textLinks[0].relstringnoopener noreferrerA space-separated list of link types
footer.iconLinksarray[]An array of icons to display in the footer
footer.iconLinks[0].labelstringA label to use for the icon
footer.iconLinks[0].hrefstringA link to use for the icon
footer.iconLinks[0].iconstringThe icon to use (can be a component name)
footer.iconLinks[0].relstringnoopener noreferrerA space-separated list of link types
footer.fluidbooleantrueMake footer Container fluid
GitHub
githubobjectfalseGitHub integration configuration
github.dirstringDirectory containing the files to be edited
github.branchstringBranch to start editing
github.repostringName of the GitHub repo to edit files
github.ownerstringOwner of the repo
github.editbooleanToggle "Edit this page on Github" component on documentation pages
Search
fuseobjectuseFuse options
To update the logo in the header, create a component in components/Logo.vue with your own logo.
In this example, the image is located at /public/img.
components/Logo.vue
<template>
   <img width="120" src="/img/YOURLOGO.png"/>
 </template>
-
 Edit this page on GitHub 

-
\ No newline at end of file
+
Edit this page on GitHub
+ \ No newline at end of file diff --git a/introduction/getting-started/_payload.json b/introduction/getting-started/_payload.json index ca2599670..69f7d47ba 100644 --- a/introduction/getting-started/_payload.json +++ b/introduction/getting-started/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355005] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107273] \ No newline at end of file diff --git a/introduction/getting-started/index.html b/introduction/getting-started/index.html index 81f45fd84..3010f1479 100644 --- a/introduction/getting-started/index.html +++ b/introduction/getting-started/index.html @@ -22,7 +22,7 @@ - + @@ -70,12 +70,12 @@ -

Getting Started

From your Markdown files to a deployed website in few minutes.

Play online

You can start playing with Docus in your browser using Stackblitz:

Play on StackBlitz

Create a new project

  1. Start a fresh Docus project with:
npx
npx nuxi@latest init docs -t themes/docus
+
Getting Started
From your Markdown files to a deployed website in few minutes.
Play online
You can start playing with Docus in your browser using Stackblitz:
Play on StackBlitz
Create a new project
  1. Start a fresh Docus project with:
npx
npx nuxi@latest init docs -t themes/docus
 
  1. Install the dependencies in the docs folder:
npm
npm install
 
yarn
yarn install
 
pnpm
pnpm install --shamefully-hoist
 
  1. Run the dev command to start Docus in development mode:
npm
npm run dev
 
yarn
yarn dev
 
pnpm
pnpm run dev
-
✨ Well done! A browser window should automatically open for http://localhost:3000
 Edit this page on GitHub 
Table of Contents

-
\ No newline at end of file
+
✨ Well done! A browser window should automatically open for http://localhost:3000
Edit this page on GitHub
Table of Contents
+ \ No newline at end of file diff --git a/introduction/project-structure/_payload.json b/introduction/project-structure/_payload.json index cfa62cc9a..3197edd3a 100644 --- a/introduction/project-structure/_payload.json +++ b/introduction/project-structure/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355118] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107385] \ No newline at end of file diff --git a/introduction/project-structure/index.html b/introduction/project-structure/index.html index 775b0c8ac..f2845d507 100644 --- a/introduction/project-structure/index.html +++ b/introduction/project-structure/index.html @@ -18,7 +18,7 @@ - + @@ -61,9 +61,9 @@ -

Project Structure

Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.

Directory Structure

This is the minimal directory structure to get an up and running Docus website.

content/
+
Project Structure
Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.
Directory Structure
This is the minimal directory structure to get an up and running Docus website.
content/
   index.md
 app.config.ts
 nuxt.config.ts
-
The content/ directory is where you write Markdown pages.
The app.config.ts is where you configure Docus to fit your branding and design.
The nuxt.config.ts is your Nuxt configuration.
 Edit this page on GitHub 

-
\ No newline at end of file
+

The content/ directory is where you write Markdown pages.

The app.config.ts is where you configure Docus to fit your branding and design.

The nuxt.config.ts is your Nuxt configuration.

Edit this page on GitHub
+ \ No newline at end of file diff --git a/introduction/writing-pages/_payload.json b/introduction/writing-pages/_payload.json index 45e00d526..0b21ce0b4 100644 --- a/introduction/writing-pages/_payload.json +++ b/introduction/writing-pages/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729770355133] \ No newline at end of file +[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"search-api":3},[4,11,21,29,37,45,68,78],{"id":5,"path":6,"dir":7,"title":8,"description":7,"keywords":9,"body":10},"content:0.index.md","/","","Home",[]," The best place to start your documentation. Write pages in Markdown , use Vue components and enjoy the power of Nuxt . +50 Components ready to build rich pages Docs and Page layouts Start from a README , scale to a framework documentation Navigation and Table of Contents generation Fully configurable design system Leverages Typography and Elements Used on Content Documentation What's included Nuxt Architecture Harness the full power of Nuxt 3 and its modules ecosystem. Nuxt Studio ready Edit your theme content and appearance with live-preview within Nuxt Studio . Vue Components Use built-in components (or your own!) inside your content. Write Markdown Enjoy the ease and simplicity of Markdown and discover MDC syntax . Deploy anywhere Zero config on Vercel or Netlify . Choose between static generation, on-demand rendering (Node) or edge-side rendering on CloudFlare workers . Extensible. Customize the whole design, or add components using slots - you can make Docus your own.",{"id":12,"path":13,"dir":14,"title":15,"description":16,"keywords":17,"body":20},"content:1.introduction:1.getting-started.md","/introduction/getting-started","introduction","Getting Started","From your Markdown files to a deployed website in few minutes.",[18,19],"Play online","Create a new project"," Getting Started From your Markdown files to a deployed website in few minutes. Play online You can start playing with Docus in your browser using Stackblitz: Play on StackBlitz Create a new project Start a fresh Docus project with: npx nuxi@latest init docs -t themes/docus\n Install the dependencies in the docs folder: npm install\n yarn install\n pnpm install --shamefully-hoist\n Run the dev command to start Docus in development mode: npm run dev\n yarn dev\n pnpm run dev\n ✨ Well done! A browser window should automatically open for http://localhost:3000 html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":22,"path":23,"dir":14,"title":24,"description":25,"keywords":26,"body":28},"content:1.introduction:2.project-structure.md","/introduction/project-structure","Project Structure","Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.",[27],"Directory Structure"," Project Structure Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home. Directory Structure This is the minimal directory structure to get an up and running Docus website. content/\n index.md\n app.config.ts\n nuxt.config.ts\n The content/ directory is where you write Markdown pages . The app.config.ts is where you configure Docus to fit your branding and design. The nuxt.config.ts is your Nuxt configuration . html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":30,"path":31,"dir":14,"title":32,"description":33,"keywords":34,"body":36},"content:1.introduction:3.writing-pages.md","/introduction/writing-pages","Writing Pages","Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.",[35],"Frontmatter"," Writing Pages Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. Each Markdown page in the content/ folder will be mapped to a route. File Generated route index.md / about.md /about blog/index.md /blog blog/hello.md /blog/hello 1.guide/2.installation /guide/installation Frontmatter Docus supports multiple Front-matter attributes for pages. ---\n title: \"Get Started\"\n description: \"Let's learn how to use my amazing module.\"\n ---\n Key Type Default Description layout string default Use any layout name like you would in definePageMeta() title string Defines the page title and H1 in docs pages description string Defines the page description and excerpt in docs pages redirect string A route path to redirect image object OpenGraph cover image Docs layout options aside boolean Toggles the visibility of aside navigation toc boolean Toggles the visibility of table of contents header boolean Toggles the visibility of the page header bottom boolean Toggles the visibility of page bottom section Navigation options navigation boolean Toggles the visibility of the page or directory in navigation navigation.title string Changes the name of the page or directory in navigation navigation.icon string Changes the icon of the page or directory in navigation html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":38,"path":39,"dir":14,"title":40,"description":41,"keywords":42,"body":44},"content:1.introduction:4.configuration.md","/introduction/configuration","Configuration","Learn how to configure Docus.",[43],"Customizing the logo"," Configuration Learn how to configure Docus. export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev'\n }\n })\n export default defineAppConfig ({\n docus: {\n title: 'Docus' ,\n description: 'My Docus Project' ,\n url: 'http://docus.dev' ,\n image: '/social-card-preview.png' ,\n socials: {\n twitter: '@nuxt_js' ,\n github: 'nuxt-themes/docus' ,\n },\n github: {\n root: 'content' ,\n edit: true ,\n contributors: false\n },\n layout: 'default' ,\n aside: {\n level: 1 ,\n filter: [],\n },\n header: {\n title: false ,\n logo: true ,\n showLinkIcon: false\n },\n footer: {\n credits: {\n icon: 'IconDocus' ,\n text: 'Powered by Docus' ,\n href: 'https://docus.dev' ,\n },\n textLinks: [\n {\n text: 'Nuxt' ,\n href: 'https://nuxt.com' ,\n target: '_blank' ,\n rel: 'noopener'\n }\n ],\n iconLinks: [\n {\n label: 'NuxtJS' ,\n href: 'https://nuxtjs.org' ,\n component: 'IconNuxtLabs' ,\n },\n {\n label: 'Vue Telescope' ,\n href: 'https://vuetelescope.com' ,\n component: 'IconVueTelescope' ,\n },\n ],\n }\n }\n })\n Key Type Default Description title string Docus Website title titleTemplate string Docus Website title template description string My Docus Project Website description url string Website URL layout string default Fallback layout to use (supports default or page ) Socials socials object {} Social links socials.github string The repository to use on GitHub links socials.twitter string The account to use on Twitter links socials.youtube string The channel to use on Youtube links socials.instagram string The account to use on Instagram links socials.facebook string The account to use on Facebook links socials.medium string The account to use on Medium links socials.[social] object Override social or display custom one socials.[social].label string A label to use for the social socials.[social].icon string A icon to use for the social socials.[social].href string A link to use for the social socials.[social].rel string noopener noreferrer A space-separated list of link types Header header object Header configuration header.logo boolean Whether or not to use Logo.vue as the header logo header.title string If set to a string, will be used in the header header.showLinkIcon boolean If set to true links icons will show in the header header.exclude string[] An array of path to exclude out from the header navigation header.fluid boolean true Make header Container fluid Main main object Main configuration main.fluid boolean true Make main content Container fluid main.padded boolean true Make main content Container padded Aside aside object Aside configuration aside.level string 0 Aside base level of nesting aside.collapsed boolean Will be used as default value for collapsible navigation categories aside.exclude string[] An array of path to exclude out from the aside navigation Footer footer object Footer configuration footer.credits object An object defining the bottom left credits footer.credits.icon object The icon to use for the credits footer.credits.text object The text to use for the credits footer.textLinks array [] An array of texts to display at the center of footer footer.textLinks[0].text string The text to display footer.textLinks[0].href string A link to use for the text footer.textLinks[0].target string _self Where to display the linked URL, as the name for a browsing context footer.textLinks[0].rel string noopener noreferrer A space-separated list of link types footer.iconLinks array [] An array of icons to display in the footer footer.iconLinks[0].label string A label to use for the icon footer.iconLinks[0].href string A link to use for the icon footer.iconLinks[0].icon string The icon to use (can be a component name) footer.iconLinks[0].rel string noopener noreferrer A space-separated list of link types footer.fluid boolean true Make footer Container fluid GitHub github object false GitHub integration configuration github.dir string Directory containing the files to be edited github.branch string Branch to start editing github.repo string Name of the GitHub repo to edit files github.owner string Owner of the repo github.edit boolean Toggle \"Edit this page on Github\" component on documentation pages Search fuse object useFuse options Customizing the logo To update the logo in the header, create a component in components/Logo.vue with your own logo. In this example, the image is located at /public/img . \u003C template >\n \u003C img width = \"120\" src = \"/img/YOURLOGO.png\" />\n \u003C/ template >\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":46,"path":47,"dir":48,"title":49,"description":50,"keywords":51,"body":67},"content:2.api:1.components.md","/api/components","api","Components","Discover every component you can use in your content.",[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66],"\u003CAlert />","\u003CBadge />","\u003CBlockHero />","\u003CButtonLink />","\u003CCallout />","\u003CCard />","\u003CCardGrid />","\u003CCodeGroup />","\u003CCodeBlock />","\u003CCopyButton />","\u003CIcon />","\u003CList />","\u003CSandbox />","\u003CTerminal />","\u003CVideoPlayer />"," Components Discover every component you can use in your content. \u003CAlert /> Check out an info alert with code and a link . Check out a success alert with code and a link . Check out a warning alert with code and a link . Check out a danger alert with code and a link . ::alert{type=\"info\"}\n Check out an **info** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"success\"}\n Check out a **success** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"warning\"}\n Check out a **warning** alert with `code` and a [ link ]( / ).\n ::\n \n ::alert{type=\"danger\"}\n Check out a **danger** alert with `code` and a [ link ]( / ).\n ::\n \u003CBadge /> \u003CBadge /> support same types as \u003CAlert /> . v1.2 Deprecated Not found! :badge[ v1.2 ]\n \n :badge[ Deprecated ]{type=\"warning\"}\n \n ::badge{type=\"danger\"}\n Not found!\n ::\n \u003CBlockHero /> Document-driven framework Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. ::block-hero\n ---\n cta:\n - Get started\n - /get-started\n secondary:\n - Open on GitHub →\n - https://github.com/nuxtlabs/docus\n snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter\n ---\n #title\n Document-driven framework\n \n #description\n Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.\n ::\n \u003CButtonLink /> Play on StackBlitz :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}\n \u003CCallout /> \u003CCallout /> support same types as \u003CAlert /> . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::callout\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \n ::callout{type=\"warning\"}\n #summary\n This is a callout! Click me to open.\n \n #content\n This is the content of the callout.\n ::\n \u003CCard /> Nuxt Architecture. Based on Nuxt 3 and Nuxt Content . \nUse Nuxt to build a static site, or a serverless app. ::card{icon=\"logos:nuxt-icon\"}\n #title\n Nuxt Architecture.\n #description\n Based on **Nuxt 3** and **Nuxt Content** . :br\n Use Nuxt to build a static site, or a serverless app.\n ::\n \u003CCardGrid /> What's included? Nuxt Architecture. Harness the full power of Nuxt and the Nuxt ecosystem. Vue Components. Use built-in components (or your own!) inside your content. Write Markdown. Enjoy the ease and simplicity of Markdown and discover MDC syntax. ::card-grid\n #title\n What's included\n \n #root\n :ellipsis\n \n #default\n ::card\n #title\n Nuxt Architecture.\n #description\n Harness the full power of Nuxt and the Nuxt ecosystem.\n ::\n ::card\n #title\n Vue Components.\n #description\n Use built-in components (or your own!) inside your content.\n ::\n ::card\n #title\n Write Markdown.\n #description\n Enjoy the ease and simplicity of Markdown and discover MDC syntax.\n ::\n ::\n \u003CCodeGroup /> This component uses slots to create a tab panel of your code examples or preview. yarn add docus\n npm install docus\n ::code-group\n ```bash [Yarn]\n yarn add docus\n ```\n ```bash [NPM]\n npm install docus\n ```\n ::\n \u003CCodeBlock /> To be used inside a \u003CCodeGroup /> component to display a preview of some rendered code. Hello World! /* Added as a child of `\u003CCodeGroup />` */\n \n ::code-block{label=\"Preview\" preview}\n ::badge\n Hello World!\n ::\n ::\n \u003CCopyButton /> :copy-button{content=\"hey!\"}\n \u003CIcon /> Icon component gives you access to all 100,000+ icons from icones.js.org . :icon{name=\"logos:nuxt-icon\"}\n :icon{name=\"logos:vue\"}\n :icon{name=\"logos:nuxt-icon\"}\n \u003CList /> Important Always Amazing Congrats Do you know? You can also do this Be careful Use with precautions Drinking too much Driving drunk ::list{type=\"primary\"}\n - **Important**\n - Always\n ::\n \n ::list{type=\"success\"}\n - Amazing\n - Congrats\n ::\n \n ::list{type=\"info\"}\n - Do you know?\n - You can also do this\n ::\n \n ::list{type=\"warning\"}\n - Be careful\n - Use with precautions\n ::\n \n ::list{type=\"danger\"}\n - Drinking too much\n - Driving drunk\n ::\n \u003CSandbox /> Embed CodeSandbox/StackBlitz easily in your documentation with great performances. Using the IntersectionObserver to load when visible in the viewport. :sandbox{src=\"https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark\"}\n \u003CTerminal /> :terminal{content=\"nuxi build\"}\n \u003CVideoPlayer /> ::div\n :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}\n ::\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":69,"path":70,"dir":48,"title":71,"description":72,"keywords":73,"body":77},"content:2.api:2.composables.md","/api/composables","Composables","Discover the Docus composables to use in your custom Vue components and pages.",[74,75,76],"useDocus()","useMenu()","useScrollspy()"," Composables Discover the Docus composables to use in your custom Vue components and pages. useDocus() useDocus () gives access to docus runtime config, all default values and your custom config from app.config.ts config refers to the merged config of the current page. main , header , aside , footer and titleTemplate can be set from _dir.yml and any page.md file. The configs in app.config file will be used as defaults. \u003C script setup >\n const { config } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C div >\n \u003C h1 >{{ config.title }}\u003C/ h1 >\n \u003C p >{{ config.description }}\u003C/ p >\n \u003C/ div >\n \u003C/ template >\n tree refers to the current navigation tree that is displayed in the aside component. \u003C script setup >\n const { tree } = useDocus ()\n \u003C/ script >\n \n \u003C template >\n \u003C DocsAsideTree :links = \"tree\" />\n \u003C/ template >\n useMenu() useMenu() gives access to $menu plugin controlling mobile navigation globally. const {\n // Is menu visible\n visible ,\n // Close menu function\n close ,\n // Open menu function\n open ,\n // Toggle menu function\n toggle\n } = useMenu ()\n useScrollspy() useScrollspy() is used in docs layout to make the ToC display the currently visible headings. const {\n // Headings on the page\n visibleHeadings ,\n // Active headings (for the current page)\n activeHeadings ,\n // Update headings (an array of DOM nodes)\n updateHeadings\n } = useScrollspy ()\n html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"id":79,"path":80,"dir":48,"title":81,"description":82,"keywords":83,"body":86},"content:2.api:3.layouts.md","/api/layouts","Layouts","Docus provides multiple built-in layouts for displaying your Markdown pages.",[84,85],"default","page"," Layouts Docus provides multiple built-in layouts for displaying your Markdown pages. default The default layout for every page created in the project. This layout renders multiple section alongside the content: Aside navigation menu (togglable with aside: false/true ) Page bottom section (togglable with bottom: false/true ) Table of content (togglable with toc: false/true ) ---\n aside: true\n bottom: true\n toc: false\n ---\n \n Your awesome content\n Current page is live sample of default layout. page page layout is content focused layout. This layout does not render aside menu of table of contents. This layout accept some configuration from content front-matter. fluid : By setting fluid: true in content front-matter the content will be rendered in full width. constrainedClass : Using this option you can modify layout container look. Like constraining layout width of changing the background. padded : Setting padded: true in front-matter will add horizontal padding in the layout. ---\n title: Home\n layout: page\n fluid: true\n ---\n Check Home page as live sample of page layout html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1729772107399] \ No newline at end of file diff --git a/introduction/writing-pages/index.html b/introduction/writing-pages/index.html index 59b937ae0..25fc86d41 100644 --- a/introduction/writing-pages/index.html +++ b/introduction/writing-pages/index.html @@ -24,7 +24,7 @@ - + @@ -74,9 +74,9 @@ -

Writing Pages

Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.

Each Markdown page in the content/ folder will be mapped to a route.

FileGenerated route
index.md/
about.md/about
blog/index.md/blog
blog/hello.md/blog/hello
1.guide/2.installation/guide/installation

Frontmatter

Docus supports multiple Front-matter attributes for pages.

index.md
---
+
Writing Pages
Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
Each Markdown page in the content/ folder will be mapped to a route.
FileGenerated route
index.md/
about.md/about
blog/index.md/blog
blog/hello.md/blog/hello
1.guide/2.installation/guide/installation
Frontmatter
Docus supports multiple Front-matter attributes for pages.
index.md
---
 title: "Get Started"
 description: "Let's learn how to use my amazing module."
 ---
-
KeyTypeDefaultDescription
layoutstringdefaultUse any layout name like you would in definePageMeta()
titlestringDefines the page title and H1 in docs pages
descriptionstringDefines the page description and excerpt in docs pages
redirectstringA route path to redirect
imageobjectOpenGraph cover image
Docs layout options
asidebooleanToggles the visibility of aside navigation
tocbooleanToggles the visibility of table of contents
headerbooleanToggles the visibility of the page header
bottombooleanToggles the visibility of page bottom section
Navigation options
navigationbooleanToggles the visibility of the page or directory in navigation
navigation.titlestringChanges the name of the page or directory in navigation
navigation.iconstringChanges the icon of the page or directory in navigation
 Edit this page on GitHub 

-
\ No newline at end of file
+
KeyTypeDefaultDescription
layoutstringdefaultUse any layout name like you would in definePageMeta()
titlestringDefines the page title and H1 in docs pages
descriptionstringDefines the page description and excerpt in docs pages
redirectstringA route path to redirect
imageobjectOpenGraph cover image
Docs layout options
asidebooleanToggles the visibility of aside navigation
tocbooleanToggles the visibility of table of contents
headerbooleanToggles the visibility of the page header
bottombooleanToggles the visibility of page bottom section
Navigation options
navigationbooleanToggles the visibility of the page or directory in navigation
navigation.titlestringChanges the name of the page or directory in navigation
navigation.iconstringChanges the icon of the page or directory in navigation
Edit this page on GitHub
+ \ No newline at end of file