├── .eslintignore ├── .npmrc ├── tsconfig.json ├── content ├── 2.api │ ├── _dir.yml │ ├── 3.layouts.md │ ├── 2.composables.md │ └── 1.components.md ├── 1.introduction │ ├── _dir.yml │ ├── 2.project-structure.md │ ├── 1.getting-started.md │ ├── 3.writing-pages.md │ └── 4.configuration.md └── 0.index.md ├── public ├── cover.png └── favicon.ico ├── tokens.config.ts ├── renovate.json ├── .gitignore ├── .eslintrc.cjs ├── nuxt.config.ts ├── package.json ├── app.config.ts ├── README.md └── .github └── workflows └── studio.yml /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .output 4 | .nuxt -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /content/2.api/_dir.yml: -------------------------------------------------------------------------------- 1 | title: 'API' 2 | icon: heroicons-outline:bookmark-alt 3 | -------------------------------------------------------------------------------- /public/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/docus-from-nuxt-studio/master/public/cover.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/docus-from-nuxt-studio/master/public/favicon.ico -------------------------------------------------------------------------------- /tokens.config.ts: -------------------------------------------------------------------------------- 1 | import { defineTheme } from 'pinceau' 2 | 3 | export default defineTheme({ 4 | }) 5 | -------------------------------------------------------------------------------- /content/1.introduction/_dir.yml: -------------------------------------------------------------------------------- 1 | icon: ph:star-duotone 2 | navigation.redirect: /introduction/getting-started 3 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ], 5 | "lockFileMaintenance": { 6 | "enabled": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | sw.* 11 | .env 12 | .output 13 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@nuxt/eslint-config', 4 | rules: { 5 | 'vue/max-attributes-per-line': 'off', 6 | 'vue/multi-word-component-names': 'off' 7 | } 8 | } -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | // https://github.com/nuxt-themes/docus 3 | extends: '@nuxt-themes/docus', 4 | 5 | modules: [ 6 | // https://github.com/nuxt-modules/plausible 7 | '@nuxtjs/plausible', 8 | // https://github.com/nuxt/devtools 9 | '@nuxt/devtools' 10 | ] 11 | }) 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docus-starter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate", 9 | "preview": "nuxi preview", 10 | "lint": "eslint ." 11 | }, 12 | "devDependencies": { 13 | "@nuxt-themes/docus": "^1.15.0", 14 | "@nuxt/content": "^2.8.2", 15 | "@nuxt/devtools": "^0.6.7", 16 | "@nuxt/eslint-config": "^0.1.1", 17 | "@nuxthq/studio": "^0.14.0", 18 | "@nuxtjs/plausible": "^0.2.1", 19 | "@types/node": "^20.4.0", 20 | "eslint": "^8.44.0", 21 | "nuxt": "^3.8.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /content/1.introduction/2.project-structure.md: -------------------------------------------------------------------------------- 1 | # Project Structure 2 | 3 | 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. 4 | 5 | ## Directory Structure 6 | 7 | This is the minimal directory structure to get an up and running Docus website. 8 | 9 | ```bash 10 | content/ 11 | index.md 12 | app.config.ts 13 | nuxt.config.ts 14 | ``` 15 | 16 | The `content/` directory is where you [write Markdown pages](/introduction/writing-pages). 17 | 18 | The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design. 19 | 20 | 21 | The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration). 22 | -------------------------------------------------------------------------------- /app.config.ts: -------------------------------------------------------------------------------- 1 | export default defineAppConfig({ 2 | docus: { 3 | title: 'Docus', 4 | description: 'The best place to start your documentation.', 5 | image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png', 6 | socials: { 7 | twitter: 'nuxt_js', 8 | github: 'nuxt-themes/docus', 9 | nuxt: { 10 | label: 'Nuxt', 11 | icon: 'simple-icons:nuxtdotjs', 12 | href: 'https://nuxt.com' 13 | } 14 | }, 15 | github: { 16 | dir: '.starters/default/content', 17 | branch: 'main', 18 | repo: 'docus', 19 | owner: 'nuxt-themes', 20 | edit: true 21 | }, 22 | aside: { 23 | level: 0, 24 | collapsed: false, 25 | exclude: [] 26 | }, 27 | main: { 28 | padded: true, 29 | fluid: true 30 | }, 31 | header: { 32 | logo: true, 33 | showLinkIcon: true, 34 | exclude: [], 35 | fluid: true 36 | } 37 | } 38 | }) 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Docus Starter 2 | 3 | Starter template for [Docus](https://docus.dev). 4 | 5 | ## Clone 6 | 7 | Clone the repository (using `nuxi`): 8 | 9 | ```bash 10 | npx nuxi init -t themes/docus 11 | ``` 12 | 13 | ## Setup 14 | 15 | Install dependencies: 16 | 17 | ```bash 18 | yarn install 19 | ``` 20 | 21 | ## Development 22 | 23 | ```bash 24 | yarn dev 25 | ``` 26 | 27 | ## Edge Side Rendering 28 | 29 | Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments. 30 | 31 | Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets). 32 | 33 | ```bash 34 | yarn build 35 | ``` 36 | 37 | ## Static Generation 38 | 39 | Use the `generate` command to build your application. 40 | 41 | The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting. 42 | 43 | ```bash 44 | yarn generate 45 | ``` 46 | 47 | ## Preview build 48 | 49 | You might want to preview the result of your build locally, to do so, run the following command: 50 | 51 | ```bash 52 | yarn preview 53 | ``` 54 | 55 | --- 56 | 57 | For a detailed explanation of how things work, check out [Docus](https://docus.dev). 58 | -------------------------------------------------------------------------------- /content/1.introduction/1.getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | From your Markdown files to a deployed website in few minutes. 4 | 5 | ## Play online 6 | 7 | You can start playing with Docus in your browser using Stackblitz: 8 | 9 | :button-link[Play on StackBlitz]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank} 10 | 11 | ## Create a new project 12 | 13 | 1. Start a fresh Docus project with: 14 | 15 | ```bash [npx] 16 | npx nuxi@latest init docs -t themes/docus 17 | ``` 18 | 19 | 2. Install the dependencies in the `docs` folder: 20 | 21 | ::code-group 22 | 23 | ```bash [npm] 24 | npm install 25 | ``` 26 | 27 | ```bash [yarn] 28 | yarn install 29 | ``` 30 | 31 | ```bash [pnpm] 32 | pnpm install --shamefully-hoist 33 | ``` 34 | 35 | :: 36 | 37 | 3. Run the `dev` command to start Docus in development mode: 38 | 39 | ::code-group 40 | 41 | ```bash [npm] 42 | npm run dev 43 | ``` 44 | 45 | ```bash [yarn] 46 | yarn dev 47 | ``` 48 | 49 | ```bash [pnpm] 50 | pnpm run dev 51 | ``` 52 | 53 | :: 54 | 55 | ::alert{type="success"} 56 | ✨ Well done! A browser window should automatically open for 57 | :: 58 | -------------------------------------------------------------------------------- /content/2.api/3.layouts.md: -------------------------------------------------------------------------------- 1 | # Layouts 2 | Docus provides multiple built-in layouts for displaying your Markdown pages. 3 | 4 | ## `default` 5 | 6 | The default layout for every page created in the project. This layout renders multiple section alongside the content: 7 | 8 | - Aside navigation menu (togglable with `aside: false/true`) 9 | - Page bottom section (togglable with `bottom: false/true`) 10 | - Table of content (togglable with `toc: false/true`) 11 | 12 | ```md [index.md] 13 | --- 14 | aside: true 15 | bottom: true 16 | toc: false 17 | --- 18 | 19 | Your awesome content 20 | ``` 21 | 22 | Current page is live sample of default layout. 23 | 24 | ## `page` 25 | 26 | `page` layout is content focused layout. This layout does not render aside menu of table of contents. 27 | 28 | 29 | This layout accept some configuration from content front-matter. 30 | 31 | - `fluid`: By setting `fluid: true` in content front-matter the content will be rendered in full width. 32 | - `constrainedClass`: Using this option you can modify layout container look. Like constraining layout width of changing the background. 33 | - `padded`: Setting `padded: true` in front-matter will add horizontal padding in the layout. 34 | 35 | ```md [index.md] 36 | --- 37 | title: Home 38 | layout: page 39 | fluid: true 40 | --- 41 | ``` 42 | 43 | Check [Home page](/) as live sample of page layout 44 | -------------------------------------------------------------------------------- /content/2.api/2.composables.md: -------------------------------------------------------------------------------- 1 | # Composables 2 | 3 | Discover the Docus composables to use in your custom Vue components and pages. 4 | 5 | ## `useDocus()` 6 | 7 | `useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts` 8 | 9 | - `config` refers to the merged config of the current page. 10 | 11 | `main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file. 12 | 13 | The configs in `app.config` file will be used as defaults. 14 | 15 | ```vue 16 | 19 | 20 | 26 | ``` 27 | 28 | - `tree` refers to the current navigation tree that is displayed in the `aside` component. 29 | 30 | ```vue 31 | 34 | 35 | 38 | ``` 39 | 40 | ::source-link 41 | --- 42 | source: "composables/useDocus.ts" 43 | --- 44 | :: 45 | 46 | ## `useMenu()` 47 | 48 | `useMenu()` gives access to `$menu` plugin controlling mobile navigation globally. 49 | 50 | ```ts 51 | const { 52 | // Is menu visible 53 | visible, 54 | // Close menu function 55 | close, 56 | // Open menu function 57 | open, 58 | // Toggle menu function 59 | toggle 60 | } = useMenu() 61 | ``` 62 | 63 | ::source-link 64 | --- 65 | source: "composables/useMenu.ts" 66 | --- 67 | :: 68 | 69 | ## `useScrollspy()` 70 | 71 | `useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings. 72 | 73 | ```ts 74 | const { 75 | // Headings on the page 76 | visibleHeadings, 77 | // Active headings (for the current page) 78 | activeHeadings, 79 | // Update headings (an array of DOM nodes) 80 | updateHeadings 81 | } = useScrollspy() 82 | ``` 83 | 84 | ::source-link 85 | --- 86 | source: "composables/useScrollspy.ts" 87 | --- 88 | :: 89 | -------------------------------------------------------------------------------- /.github/workflows/studio.yml: -------------------------------------------------------------------------------- 1 | 2 | name: studio-nuxt-build 3 | run-name: studio nuxt build 4 | 5 | on: 6 | # Runs on pushes targeting the default branch 7 | push: 8 | branches: 9 | - 'master' 10 | 11 | # Allows you to run this workflow manually from the Actions tab 12 | workflow_dispatch: 13 | 14 | # Add write workflow permissions 15 | permissions: 16 | contents: write 17 | 18 | # Allow one concurrent deployment 19 | concurrency: 20 | group: "pages" 21 | cancel-in-progress: true 22 | 23 | jobs: 24 | # Build job 25 | build-and-deploy: 26 | runs-on: ${{ matrix.os }} 27 | defaults: 28 | run: 29 | working-directory: . 30 | 31 | strategy: 32 | matrix: 33 | os: [ubuntu-latest] 34 | node: [18] 35 | 36 | steps: 37 | - name: Checkout 38 | uses: actions/checkout@v4 39 | 40 | - name: Identify package manager 41 | id: pkgman 42 | run: | 43 | cache=`[ -f "./pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "./package-lock.json" ] && echo "npm" || ([ -f "./yarn.lock" ] && echo "yarn" || echo ""))` 44 | package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"` 45 | echo "cache=$cache" >> $GITHUB_OUTPUT 46 | echo "package_manager=$package_manager" >> $GITHUB_OUTPUT 47 | 48 | - uses: pnpm/action-setup@v2.4.0 49 | if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }} 50 | name: Install pnpm 51 | id: pnpm-install 52 | with: 53 | version: 8 54 | 55 | - uses: actions/setup-node@v3 56 | with: 57 | version: ${{ matrix.node }} 58 | cache: ${{ steps.pkgman.outputs.cache }} 59 | 60 | - name: Install dependencies 61 | run: ${{ steps.pkgman.outputs.package_manager }} install 62 | 63 | - name: Install @nuxthq/studio 64 | run: ${{ steps.pkgman.outputs.package_manager }} add -D @nuxthq/studio 65 | 66 | - name: Create .nuxtrc 67 | run: echo $'\nautoImport=true\nmodules[]=@nuxthq/studio' >> .nuxtrc 68 | 69 | - name: Generate 70 | run: npx nuxi generate 71 | env: 72 | NUXT_PUBLIC_STUDIO_API_URL: https://api.nuxt.studio 73 | NUXT_PUBLIC_STUDIO_TOKENS: 5877a6e6dd53eb219645c2b7dd76e2f7580a6d5c405a6dcbd7dfaa38c33f517f 74 | 75 | 76 | - name: Add .nojekyll file 77 | run: touch .output/public/.nojekyll 78 | 79 | # Deployment job 80 | - name: Deploy 🚀 81 | uses: JamesIves/github-pages-deploy-action@v4 82 | with: 83 | folder: ./.output/public 84 | -------------------------------------------------------------------------------- /content/1.introduction/3.writing-pages.md: -------------------------------------------------------------------------------- 1 | # Writing Pages 2 | 3 | Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax. 4 | 5 | Each Markdown pages in the `content/` folder will be mapped to a route. 6 | 7 | | File | Generated route | 8 | | ------------------------ | :-------------------- | 9 | | `index.md` | `/` | 10 | | `about.md` | `/about` | 11 | | `blog/index.md` | `/blog` | 12 | | `blog/hello.md` | `/blog/hello` | 13 | | `1.guide/2.installation` | `/guide/installation` | 14 | 15 | ## Frontmatter 16 | 17 | Docus supports multiple Front-matter attributes for pages. 18 | 19 | ```md [index.md] 20 | --- 21 | title: "Get Started" 22 | description: "Let's learn how to use my amazing module." 23 | --- 24 | ``` 25 | 26 | | **Key** | **Type** | **Default** | **Description** | 27 | | ----------------------- | --------- | ----------- | ------------------------------------------------------------- | 28 | | `layout` | `string` | `default` | Use any layout name like you would in `definePageMeta()` | 29 | | `title` | `string` | | Defines the page title and H1 in docs pages | 30 | | `description` | `string` | | Defines the page description and excerpt in docs pages | 31 | | `redirect` | `string` | | A route path to redirect | 32 | | `image` | `object` | | OpenGraph cover image | 33 | | **Docs layout options** | | | | 34 | | `aside` | `boolean` | | Toggles the visibility of aside navigation | 35 | | `toc` | `boolean` | | Toggles the visibility of table of contents | 36 | | `header` | `boolean` | | Toggles the visibility of the page header | 37 | | `bottom` | `boolean` | | Toggles the visibility of page bottom section | 38 | | **Navigation options** | | | | 39 | | `navigation` | `boolean` | | Toggles the visibility of the page or directory in navigation | 40 | | `navigation.title` | `string` | | Changes the name of the page or directory in navigation | 41 | | `navigation.icon` | `string` | | Changes the icon of the page or directory in navigation | 42 | -------------------------------------------------------------------------------- /content/0.index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | navigation: false 4 | layout: page 5 | main: 6 | fluid: false 7 | --- 8 | 9 | :ellipsis{right=0px width=75% blur=150px} 10 | 11 | ::block-hero 12 | --- 13 | cta: 14 | - Get started 15 | - /introduction/getting-started 16 | secondary: 17 | - Open on GitHub → 18 | - https://github.com/nuxt-themes/docus 19 | --- 20 | 21 | #title 22 | The best place to start your documentation. 23 | 24 | #description 25 | Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com). 26 | 27 | #extra 28 | ::list 29 | - **+50 Components** ready to build rich pages 30 | - **Docs** and **Page** layouts 31 | - Start from a `README`, scale to a framework documentation 32 | - Navigation and Table of Contents generation 33 | - Fully configurable design system 34 | - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev) 35 | - Used on [Content Documentation](https://content.nuxtjs.org) 36 | :: 37 | 38 | #support 39 | ::terminal 40 | --- 41 | content: 42 | - npx nuxi@latest init -t themes/docus 43 | - cd docs 44 | - npm install 45 | - npm run dev 46 | --- 47 | :: 48 | :: 49 | 50 | ::card-grid 51 | #title 52 | What's included 53 | 54 | #root 55 | :ellipsis{left=0px width=40rem top=10rem blur=140px} 56 | 57 | #default 58 | ::card{icon=logos:nuxt-icon} 59 | #title 60 | Nuxt Architecture 61 | #description 62 | Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem. 63 | :: 64 | 65 | ::card{icon=IconNuxtStudio} 66 | #title 67 | Nuxt Studio ready 68 | #description 69 | Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio). 70 | :: 71 | 72 | ::card{icon=logos:vue} 73 | #title 74 | Vue Components 75 | #description 76 | Use built-in components (or your own!) inside your content. 77 | :: 78 | 79 | ::card{icon=simple-icons:markdown} 80 | #title 81 | Write Markdown 82 | #description 83 | Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc). 84 | :: 85 | 86 | ::card{icon=noto:rocket} 87 | #title 88 | Deploy anywhere 89 | #description 90 | Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com). 91 | :: 92 | 93 | ::card{icon=noto:puzzle-piece} 94 | #title 95 | Extensible. 96 | #description 97 | Customize the whole design, or add components using slots - you can make Docus your own. 98 | :: 99 | :: 100 | -------------------------------------------------------------------------------- /content/1.introduction/4.configuration.md: -------------------------------------------------------------------------------- 1 | # Configuration 2 | 3 | Learn how to configure Docus. 4 | 5 | ::code-group 6 | 7 | ```ts [Minimal app.config.ts] 8 | export default defineAppConfig({ 9 | docus: { 10 | title: 'Docus', 11 | description: 'My Docus Project', 12 | url: 'http://docus.dev' 13 | } 14 | }) 15 | ``` 16 | 17 | ```ts [Complete app.config.ts] 18 | export default defineAppConfig({ 19 | docus: { 20 | title: 'Docus', 21 | description: 'My Docus Project', 22 | url: 'http://docus.dev', 23 | image: '/social-card-preview.png', 24 | socials: { 25 | twitter: '@nuxt_js', 26 | github: 'nuxt-themes/docus', 27 | }, 28 | github: { 29 | root: 'content', 30 | edit: true, 31 | contributors: false 32 | }, 33 | layout: 'default', 34 | aside: { 35 | level: 1, 36 | filter: [], 37 | }, 38 | header: { 39 | title: false, 40 | logo: true, 41 | showLinkIcon: false 42 | }, 43 | footer: { 44 | credits: { 45 | icon: 'IconDocus', 46 | text: 'Powered by Docus', 47 | href: 'https://docus.dev', 48 | }, 49 | textLinks: [ 50 | { 51 | text: 'Nuxt', 52 | href: 'https://nuxt.com', 53 | target: '_blank', 54 | rel: 'noopener' 55 | } 56 | ], 57 | iconLinks: [ 58 | { 59 | label: 'NuxtJS', 60 | href: 'https://nuxtjs.org', 61 | component: 'IconNuxtLabs', 62 | }, 63 | { 64 | label: 'Vue Telescope', 65 | href: 'https://vuetelescope.com', 66 | component: 'IconVueTelescope', 67 | }, 68 | ], 69 | } 70 | } 71 | }) 72 | ``` 73 | 74 | :: 75 | 76 | | **Key** | **Type** | **Default** | **Description** | 77 | | ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- | 78 | | `title` | `string` | Docus | Website title | 79 | | `titleTemplate` | `string` | Docus | Website title template | 80 | | `description` | `string` | My Docus Project | Website description | 81 | | `url` | `string` | | Website URL | 82 | | `layout` | `string` | default | Fallback layout to use (supports `default` or `page`) | 83 | | **Socials** | | | | 84 | | `socials` | `object` | `{}` | Social links | 85 | | `socials.github` | `string` | | The repository to use on GitHub links | 86 | | `socials.twitter` | `string` | | The account to use on Twitter links | 87 | | `socials.youtube` | `string` | | The channel to use on Youtube links | 88 | | `socials.instagram` | `string` | | The account to use on Instagram links | 89 | | `socials.facebook` | `string` | | The account to use on Facebook links | 90 | | `socials.medium` | `string` | | The account to use on Medium links | 91 | | `socials.[social]` | `object` | | Override social or display custom one | 92 | | `socials.[social].label` | `string` | | A label to use for the social | 93 | | `socials.[social].icon` | `string` | | A icon to use for the social | 94 | | `socials.[social].href` | `string` | | A link to use for the social | 95 | | `socials.[social].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | 96 | | **Header** | | | | 97 | | `header` | `object` | | Header configuration | 98 | | `header.logo` | `boolean` | | Whether or not to use `Logo.vue` as the header logo | 99 | | `header.title` | `string` | | If set to a string, will be used in the header | 100 | | `header.showLinkIcon` | `boolean` | | If set to `true` links icons will show in the header | 101 | | `header.exclude` | `string[]` | | An array of path to exclude out from the header navigation | 102 | | `header.fluid` | `boolean` | `true` | Make header `Container` fluid | 103 | | **Main** | | | | 104 | | `main` | `object` | | Main configuration | 105 | | `main.fluid` | `boolean` | `true` | Make main content `Container` fluid | 106 | | `main.padded` | `boolean` | `true` | Make main content `Container` padded | 107 | | **Aside** | | | | 108 | | `aside` | `object` | | Aside configuration | 109 | | `aside.level` | `string` | 0 | Aside base level of nesting | 110 | | `aside.collapsed` | `boolean` | | Will be used as default value for collapsible navigation categories | 111 | | `aside.exclude` | `string[]` | | An array of path to exclude out from the aside navigation | 112 | | **Footer** | | | | 113 | | `footer` | `object` | | Footer configuration | 114 | | `footer.credits` | `object` | | An object defining the bottom left credits | 115 | | `footer.credits.icon` | `object` | | The icon to use for the credits | 116 | | `footer.credits.text` | `object` | | The text to use for the credits | 117 | | `footer.textLinks` | `array` | `[]` | An array of texts to display at the center of footer | 118 | | `footer.textLinks[0].text` | `string` | | The text to display | 119 | | `footer.textLinks[0].href` | `string` | | A link to use for the text | 120 | | `footer.textLinks[0].target` | `string` | `_self` | Where to display the linked URL, as the name for a browsing context | 121 | | `footer.textLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | 122 | | `footer.iconLinks` | `array` | `[]` | An array of icons to display in the footer | 123 | | `footer.iconLinks[0].label` | `string` | | A label to use for the icon | 124 | | `footer.iconLinks[0].href` | `string` | | A link to use for the icon | 125 | | `footer.iconLinks[0].icon` | `string` | | The icon to use (can be a component name) | 126 | | `footer.iconLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) | 127 | | `footer.fluid` | `boolean` | `true` | Make footer `Container` fluid | 128 | | **GitHub** | | | | 129 | | `github` | `object` | `false` | GitHub integration configuration | 130 | | `github.dir` | `string` | | Directory containing the files to be edited | 131 | | `github.branch` | `string` | | Branch to start editing | 132 | | `github.repo` | `string` | | Name of the GitHub repo to edit files | 133 | | `github.owner` | `string` | | Owner of the repo | 134 | | `github.edit` | `boolean` | | Toggle "Edit this page on Github" component on documentation pages | 135 | **Search** |||| 136 | | `fuse` | `object` || useFuse [options](https://vueuse.org/integrations/useFuse/) | 137 | 138 | 139 | ## Customizing the logo 140 | 141 | To update the logo in the header, create a component in `components/Logo.vue` with your own logo. 142 | 143 | In this example, the image is located at `/public/img`. 144 | 145 | ```vue [components/Logo.vue] 146 | 149 | ``` 150 | -------------------------------------------------------------------------------- /content/2.api/1.components.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | Discover every component you can use in your content. 4 | 5 | 6 | ## `` 7 | 8 | ::code-group 9 | 10 | ::code-block{label="Preview" preview} 11 | ::alert{type="info" style="margin-top: 0;"} 12 | Check out an **info** alert with `code` and a [link](/). 13 | :: 14 | 15 | ::alert{type="success"} 16 | Check out a **success** alert with `code` and a [link](/). 17 | :: 18 | 19 | ::alert{type="warning"} 20 | Check out a **warning** alert with `code` and a [link](/). 21 | :: 22 | 23 | ::alert{type="danger" style="margin-bottom: 0;"} 24 | Check out a **danger** alert with `code` and a [link](/). 25 | :: 26 | :: 27 | 28 | ```md [Code] 29 | ::alert{type="info"} 30 | Check out an **info** alert with `code` and a [link](/). 31 | :: 32 | 33 | ::alert{type="success"} 34 | Check out a **success** alert with `code` and a [link](/). 35 | :: 36 | 37 | ::alert{type="warning"} 38 | Check out a **warning** alert with `code` and a [link](/). 39 | :: 40 | 41 | ::alert{type="danger"} 42 | Check out a **danger** alert with `code` and a [link](/). 43 | :: 44 | ``` 45 | 46 | :: 47 | 48 | 52 | 53 | ::source-link 54 | --- 55 | source: "components/content/Alert.vue" 56 | --- 57 | :: 58 | 59 | --- 60 | 61 | ## `` 62 | 63 | `` support same types as ``. 64 | 65 | ::code-group 66 | 67 | ::code-block{label="Preview" preview} 68 | ::div{style="display:flex; gap: 1rem;"} 69 | :badge[v1.2] 70 | 71 | :badge[Deprecated]{type="warning"} 72 | 73 | ::badge{type="danger"} 74 | Not found! 75 | :: 76 | :: 77 | :: 78 | 79 | ```md [Code] 80 | :badge[v1.2] 81 | 82 | :badge[Deprecated]{type="warning"} 83 | 84 | ::badge{type="danger"} 85 | Not found! 86 | :: 87 | ``` 88 | 89 | :: 90 | 91 | 95 | 96 | ::source-link 97 | --- 98 | source: "components/content/Badge.vue" 99 | --- 100 | :: 101 | 102 | --- 103 | 104 | ## `` 105 | 106 | ::code-group 107 | 108 | ::code-block{label="Preview"} 109 | ::block-hero 110 | --- 111 | cta: 112 | - Get started 113 | - /introduction/getting-started 114 | secondary: 115 | - Open on GitHub → 116 | - https://github.com/nuxtlabs/docus 117 | snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter 118 | --- 119 | #title 120 | Document-driven framework 121 | 122 | #description 123 | Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. 124 | :: 125 | :: 126 | 127 | ```md [Code] 128 | ::block-hero 129 | --- 130 | cta: 131 | - Get started 132 | - /get-started 133 | secondary: 134 | - Open on GitHub → 135 | - https://github.com/nuxtlabs/docus 136 | snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter 137 | --- 138 | #title 139 | Document-driven framework 140 | 141 | #description 142 | Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites. 143 | :: 144 | ``` 145 | 146 | :: 147 | 148 | 152 | 153 | ::source-link 154 | --- 155 | source: "components/content/BlockHero.vue" 156 | --- 157 | :: 158 | 159 | --- 160 | 161 | ## `` 162 | ::code-group 163 | 164 | ::code-block{label="Preview" preview} 165 | :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} 166 | :: 167 | 168 | ```md [Code] 169 | :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} 170 | ``` 171 | 172 | :: 173 | 174 | 178 | 179 | ::source-link 180 | --- 181 | source: "components/content/ButtonLink.vue" 182 | --- 183 | :: 184 | 185 | --- 186 | 187 | ## `` 188 | 189 | `` support same types as ``. 190 | 191 | ::code-group 192 | 193 | ::code-block{label="Preview"} 194 | ::callout 195 | #summary 196 | This is a callout! Click me to open. 197 | 198 | #content 199 | This is the content of the callout. 200 | :: 201 | 202 | ::callout{type="warning"} 203 | #summary 204 | This is a callout! Click me to open. 205 | 206 | #content 207 | This is the content of the callout. 208 | :: 209 | :: 210 | 211 | ```md [Code] 212 | ::callout 213 | #summary 214 | This is a callout! Click me to open. 215 | 216 | #content 217 | This is the content of the callout. 218 | :: 219 | 220 | ::callout{type="warning"} 221 | #summary 222 | This is a callout! Click me to open. 223 | 224 | #content 225 | This is the content of the callout. 226 | :: 227 | ``` 228 | 229 | :: 230 | 231 | 235 | 236 | ::source-link 237 | --- 238 | source: "components/content/Callout.vue" 239 | --- 240 | :: 241 | 242 | --- 243 | 244 | ## `` 245 | 246 | ::code-group 247 | 248 | ::code-block{label="Preview"} 249 | ::card 250 | --- 251 | icon: logos:nuxt-icon 252 | --- 253 | #title 254 | Nuxt Architecture. 255 | #description 256 | Based on **Nuxt 3** and **Nuxt Content**. :br 257 | Use Nuxt to build a static site, or a serverless app. 258 | :: 259 | :: 260 | 261 | ```md [Code] 262 | ::card{icon="logos:nuxt-icon"} 263 | #title 264 | Nuxt Architecture. 265 | #description 266 | Based on **Nuxt 3** and **Nuxt Content**. :br 267 | Use Nuxt to build a static site, or a serverless app. 268 | :: 269 | ``` 270 | 271 | :: 272 | 273 | 277 | 278 | ::source-link 279 | --- 280 | source: "components/content/Card.vue" 281 | --- 282 | :: 283 | 284 | --- 285 | 286 | ## `` 287 | 288 | ::code-group 289 | 290 | ::code-block{label="Preview"} 291 | ::card-grid 292 | #title 293 | What's included? 294 | 295 | #root 296 | :ellipsis 297 | 298 | #default 299 | ::card 300 | #title 301 | Nuxt Architecture. 302 | #description 303 | Harness the full power of Nuxt and the Nuxt ecosystem. 304 | :: 305 | ::card 306 | #title 307 | Vue Components. 308 | #description 309 | Use built-in components (or your own!) inside your content. 310 | :: 311 | ::card 312 | #title 313 | Write Markdown. 314 | #description 315 | Enjoy the ease and simplicity of Markdown and discover MDC syntax. 316 | :: 317 | :: 318 | :: 319 | 320 | ```md [Code] 321 | ::card-grid 322 | #title 323 | What's included 324 | 325 | #root 326 | :ellipsis 327 | 328 | #default 329 | ::card 330 | #title 331 | Nuxt Architecture. 332 | #description 333 | Harness the full power of Nuxt and the Nuxt ecosystem. 334 | :: 335 | ::card 336 | #title 337 | Vue Components. 338 | #description 339 | Use built-in components (or your own!) inside your content. 340 | :: 341 | ::card 342 | #title 343 | Write Markdown. 344 | #description 345 | Enjoy the ease and simplicity of Markdown and discover MDC syntax. 346 | :: 347 | :: 348 | ``` 349 | 350 | :: 351 | 352 | 356 | 357 | ::source-link 358 | --- 359 | source: "components/content/CardGrid.vue" 360 | --- 361 | :: 362 | 363 | --- 364 | 365 | ## `` 366 | 367 | This component uses `slots` to create a tab panel of your code examples or preview. 368 | 369 | ::code-group 370 | 371 | ::code-block{label="Preview" preview} 372 | ::code-group 373 | ```bash [Yarn] 374 | yarn add docus 375 | ``` 376 | 377 | ```bash [NPM] 378 | npm install docus 379 | ``` 380 | :: 381 | :: 382 | 383 | ```md [Code] 384 | ::code-group 385 | ```bash [Yarn] 386 | yarn add docus 387 | ``` 388 | ```bash [NPM] 389 | npm install docus 390 | ``` 391 | :: 392 | ``` 393 | 394 | :: 395 | 396 | ::source-link 397 | --- 398 | source: "components/content/CodeGroup.vue" 399 | --- 400 | :: 401 | 402 | --- 403 | 404 | ## `` 405 | 406 | To be used inside a `` component to display a preview of some rendered code. 407 | 408 | ::code-group 409 | 410 | ::code-block{label="Preview" preview} 411 | ::badge 412 | Hello World! 413 | :: 414 | :: 415 | 416 | ```md [Code] 417 | /* Added as a child of `` */ 418 | 419 | ::code-block{label="Preview" preview} 420 | ::badge 421 | Hello World! 422 | :: 423 | :: 424 | ``` 425 | 426 | :: 427 | 428 | 432 | 433 | ::source-link 434 | --- 435 | source: "components/content/CodeBlock.vue" 436 | --- 437 | :: 438 | 439 | --- 440 | 441 | ## `` 442 | 443 | 444 | ::code-group 445 | 446 | ::code-block{label="Preview" preview} 447 | :copy-button{content="hey!"} 448 | :: 449 | 450 | ```md [Code] 451 | :copy-button{content="hey!"} 452 | ``` 453 | 454 | :: 455 | 456 | 460 | 461 | ::source-link 462 | --- 463 | source: "components/content/CopyButton.vue" 464 | --- 465 | :: 466 | 467 | --- 468 | 469 | ## `` 470 | 471 | Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org). 472 | 473 | ::code-group 474 | 475 | ::code-block{label="Preview" preview} 476 | :icon{name="logos:nuxt-icon"} 477 | :icon{name="logos:vue"} 478 | :icon{name="logos:nuxt-icon"} 479 | :: 480 | 481 | ```md [Code] 482 | :icon{name="logos:nuxt-icon"} 483 | :icon{name="logos:vue"} 484 | :icon{name="logos:nuxt-icon"} 485 | ``` 486 | 487 | :: 488 | 489 | 493 | 494 | ::source-link 495 | --- 496 | source: "components/content/Icon.vue" 497 | --- 498 | :: 499 | 500 | --- 501 | 502 | ## `` 503 | 504 | ::code-group 505 | 506 | ::code-block{label="Preview" preview} 507 | ::list{type="primary"} 508 | - **Important** 509 | - Always 510 | :: 511 | 512 | ::list{type="success"} 513 | - Amazing 514 | - Congrats 515 | :: 516 | 517 | ::list{type="info"} 518 | - Do you know? 519 | - You can also do this 520 | :: 521 | 522 | ::list{type="warning"} 523 | - Be careful 524 | - Use with precautions 525 | :: 526 | 527 | ::list{type="danger"} 528 | - Drinking too much 529 | - Driving drunk 530 | :: 531 | 532 | :: 533 | 534 | ```md [Code] 535 | ::list{type="primary"} 536 | - **Important** 537 | - Always 538 | :: 539 | 540 | ::list{type="success"} 541 | - Amazing 542 | - Congrats 543 | :: 544 | 545 | ::list{type="info"} 546 | - Do you know? 547 | - You can also do this 548 | :: 549 | 550 | ::list{type="warning"} 551 | - Be careful 552 | - Use with precautions 553 | :: 554 | 555 | ::list{type="danger"} 556 | - Drinking too much 557 | - Driving drunk 558 | :: 559 | ``` 560 | 561 | :: 562 | 563 | 567 | 568 | ::source-link 569 | --- 570 | source: "components/content/List.vue" 571 | --- 572 | :: 573 | 574 | 608 | ## `` 609 | 610 | Embed CodeSandbox/StackBlitz easily in your documentation with great performances. 611 | 612 | Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport. 613 | 614 | ::code-group 615 | 616 | ::code-block{label="Preview" preview} 617 | :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} 618 | :: 619 | 620 | ```md [Code] 621 | :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} 622 | ``` 623 | 624 | :: 625 | 626 | 630 | 631 | ::source-link 632 | --- 633 | source: "components/content/Sandbox.vue" 634 | --- 635 | :: 636 | 637 | --- 638 | 639 | ## `` 640 | 641 | ::code-group 642 | 643 | ::code-block{label="Preview" preview} 644 | :terminal{content="nuxi build"} 645 | :: 646 | 647 | ```md [Code] 648 | :terminal{content="nuxi build"} 649 | ``` 650 | 651 | :: 652 | 653 | 657 | 658 | ::source-link 659 | --- 660 | source: "components/content/Terminal.vue" 661 | --- 662 | :: 663 | 664 | --- 665 | 666 | ## `` 667 | 668 | ::code-group 669 | 670 | ::code-block{label="Preview" preview} 671 | ::div 672 | :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} 673 | :: 674 | :: 675 | 676 | ```md [Code] 677 | ::div 678 | :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} 679 | :: 680 | ``` 681 | 682 | :: 683 | 684 | 688 | 689 | ::source-link 690 | --- 691 | source: "components/content/VideoPlayer.vue" 692 | --- 693 | :: 694 | --------------------------------------------------------------------------------