[{"data":1,"prerenderedAt":87},["Reactive",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   Install the dependencies in the   docs  folder:      npm   install     yarn   install     pnpm   install   --shamefully-hoist   Run the   dev  command to start Docus in development mode:      npm   run   dev     yarn   dev     pnpm   run   dev   ✨ Well done! A browser window should automatically open for   http://localhost:3000  html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",{"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/     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 .  html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",{"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 pages 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.     ---   title  :   \"Get Started\"   description  :   \"Let's learn how to use my amazing module.\"   ---      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) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",{"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  ({     docus: {       title:   'Docus'  ,       description:   'My Docus Project'  ,       url:   'http://docus.dev'     }   })     export   default   defineAppConfig  ({     docus: {       title:   'Docus'  ,       description:   'My Docus Project'  ,       url:   'http://docus.dev'  ,       image:   '/social-card-preview.png'  ,       socials: {         twitter:   '@nuxt_js'  ,         github:   'nuxt-themes/docus'  ,       },       github: {         root:   'content'  ,         edit:   true  ,         contributors:   false       },       layout:   'default'  ,       aside: {         level:   1  ,         filter: [],       },       header: {         title:   false  ,         logo:   true  ,         showLinkIcon:   false       },       footer: {         credits: {           icon:   'IconDocus'  ,           text:   'Powered by Docus'  ,           href:   'https://docus.dev'  ,         },         textLinks: [           {             text:   'Nuxt'  ,             href:   'https://nuxt.com'  ,             target:   '_blank'  ,             rel:   'noopener'           }         ],         iconLinks: [           {             label:   'NuxtJS'  ,             href:   'https://nuxtjs.org'  ,             component:   'IconNuxtLabs'  ,           },           {             label:   'Vue Telescope'  ,             href:   'https://vuetelescope.com'  ,             component:   'IconVueTelescope'  ,           },         ],       }     }   })      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  >     \u003C  img   width  =  \"120\"   src  =  \"/img/YOURLOGO.png\"  />   \u003C/  template  >  html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",{"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\"}   Check out an   **info**   alert with   `code`   and a [  link  ](  /  ).   ::    ::alert{type=\"success\"}   Check out a   **success**   alert with   `code`   and a [  link  ](  /  ).   ::    ::alert{type=\"warning\"}   Check out a   **warning**   alert with   `code`   and a [  link  ](  /  ).   ::    ::alert{type=\"danger\"}   Check out a   **danger**   alert with   `code`   and a [  link  ](  /  ).   ::     \u003CBadge />   \u003CBadge />  support same types as   \u003CAlert /> .     v1.2  Deprecated   Not found!     :badge[  v1.2  ]    :badge[  Deprecated  ]{type=\"warning\"}    ::badge{type=\"danger\"}   Not found!   ::     \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   ---   cta:     -   Get started     -   /get-started   secondary:     -   Open on GitHub →     -   https://github.com/nuxtlabs/docus   snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter   ---   #title   Document-driven framework    #description   Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.   ::     \u003CButtonLink />    Play on StackBlitz     :button-link[Play on StackBlitz]{icon=\"IconStackBlitz\" href=\"https://stackblitz.com/github/nuxtlabs/docus-starter\" blank}     \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   #summary   This is a callout! Click me to open.    #content   This is the content of the callout.   ::       ::callout{type=\"warning\"}   #summary   This is a callout! Click me to open.    #content   This is the content of the callout.   ::     \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\"}    #title    Nuxt Architecture.    #description    Based on   **Nuxt 3**   and   **Nuxt Content**  . :br    Use Nuxt to build a static site, or a serverless app.    ::     \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   #title   What's included    #root   :ellipsis    #default     ::card     #title     Nuxt Architecture.     #description     Harness the full power of Nuxt and the Nuxt ecosystem.     ::     ::card     #title     Vue Components.     #description     Use built-in components (or your own!) inside your content.     ::     ::card     #title     Write Markdown.     #description     Enjoy the ease and simplicity of Markdown and discover MDC syntax.     ::   ::     \u003CCodeGroup />  This component uses   slots  to create a tab panel of your code examples or preview.        yarn   add   docus     npm   install   docus     ::code-group     ```bash [Yarn]     yarn   add   docus     ```     ```bash [NPM]     npm   install   docus     ```   ::     \u003CCodeBlock />  To be used inside a   \u003CCodeGroup />  component to display a preview of some rendered code.     Hello World!     /* Added as a child of   `\u003CCodeGroup />`   */    ::code-block{label=\"Preview\" preview}     ::badge     Hello World!     ::   ::     \u003CCopyButton />        :copy-button{content=\"hey!\"}     \u003CIcon />  Icon component gives you access to all   100,000+  icons from   icones.js.org .          :icon{name=\"logos:nuxt-icon\"}   :icon{name=\"logos:vue\"}   :icon{name=\"logos:nuxt-icon\"}     \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\"}   -   **Important**   -   Always   ::    ::list{type=\"success\"}   -   Amazing   -   Congrats   ::    ::list{type=\"info\"}   -   Do you know?   -   You can also do this   ::    ::list{type=\"warning\"}   -   Be careful   -   Use with precautions   ::    ::list{type=\"danger\"}   -   Drinking too much   -   Driving drunk   ::    \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\"}     \u003CTerminal />        :terminal{content=\"nuxi build\"}     \u003CVideoPlayer />         ::div     :video-player{src=\"https://www.youtube.com/watch?v=o9e12WbKrd8\"}   ::   html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",{"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  >   const   {   config   }   =   useDocus  ()   \u003C/  script  >    \u003C  template  >     \u003C  div  >       \u003C  h1  >{{ config.title }}\u003C/  h1  >       \u003C  p  >{{ config.description }}\u003C/  p  >     \u003C/  div  >   \u003C/  template  >    tree  refers to the current navigation tree that is displayed in the   aside  component.     \u003C  script   setup  >   const   {   tree   }   =   useDocus  ()   \u003C/  script  >    \u003C  template  >     \u003C  DocsAsideTree   :links  =  \"tree\"   />   \u003C/  template  >    useMenu()   useMenu()  gives access to   $menu  plugin controlling mobile navigation globally.     const   {     // Is menu visible     visible  ,     // Close menu function     close  ,     // Open menu function     open  ,     // Toggle menu function     toggle   }   =   useMenu  ()    useScrollspy()   useScrollspy()  is used in   docs  layout to make the ToC display the currently visible headings.     const   {     // Headings on the page     visibleHeadings  ,     // Active headings (for the current page)     activeHeadings  ,     // Update headings (an array of DOM nodes)     updateHeadings   }   =   useScrollspy  ()   html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",{"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 )     ---   aside  :   true   bottom  :   true   toc  :   false   ---    Your awesome content  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.     ---   title  :   Home   layout  :   page   fluid  :   true   ---  Check   Home page  as live sample of page layout  html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}",1698738520913]