├── .npmrc ├── content ├── 2.essentials │ ├── .navigation.yml │ ├── 4.images-embeds.md │ ├── 1.markdown-syntax.md │ ├── 2.code-blocks.md │ └── 3.prose-components.md ├── 1.getting-started │ ├── .navigation.yml │ ├── 2.installation.md │ ├── 1.index.md │ └── 3.usage.md ├── 3.ai │ ├── 2.llms.md │ └── 1.mcp.md └── index.md ├── public └── favicon.ico ├── .env.example ├── tsconfig.json ├── eslint.config.mjs ├── pnpm-workspace.yaml ├── .editorconfig ├── renovate.json ├── .gitignore ├── app ├── layouts │ └── docs.vue ├── components │ ├── AppFooter.vue │ ├── TemplateMenu.vue │ ├── AppHeader.vue │ ├── PageHeaderLinks.vue │ ├── content │ │ ├── HeroBackground.vue │ │ └── StarsBg.vue │ ├── OgImage │ │ └── OgImageDocs.vue │ └── AppLogo.vue ├── assets │ └── css │ │ └── main.css ├── pages │ ├── index.vue │ └── [...slug].vue ├── error.vue ├── app.vue └── app.config.ts ├── content.config.ts ├── .github └── workflows │ └── ci.yml ├── package.json ├── server ├── routes │ └── raw │ │ └── [...slug].md.get.ts └── mcp │ └── tools │ ├── list-pages.ts │ └── get-page.ts ├── nuxt.config.ts └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /content/2.essentials/.navigation.yml: -------------------------------------------------------------------------------- 1 | title: Essentials 2 | -------------------------------------------------------------------------------- /content/1.getting-started/.navigation.yml: -------------------------------------------------------------------------------- 1 | title: Getting Started 2 | icon: false 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-ui-pro/docs/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # Public URL, used for OG Image when running nuxt generate 2 | NUXT_PUBLIC_SITE_URL= 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import withNuxt from './.nuxt/eslint.config.mjs' 3 | 4 | export default withNuxt( 5 | // Your custom configs here 6 | ) 7 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | ignoredBuiltDependencies: 2 | - '@parcel/watcher' 3 | - '@tailwindcss/oxide' 4 | - esbuild 5 | - unrs-resolver 6 | - vue-demi 7 | 8 | onlyBuiltDependencies: 9 | - better-sqlite3 10 | - sharp 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "github>nuxt/renovate-config-nuxt" 4 | ], 5 | "lockFileMaintenance": { 6 | "enabled": true 7 | }, 8 | "packageRules": [{ 9 | "matchDepTypes": ["resolutions"], 10 | "enabled": false 11 | }], 12 | "postUpdateOptions": ["pnpmDedupe"] 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | 26 | # VSC 27 | .history 28 | -------------------------------------------------------------------------------- /app/layouts/docs.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /app/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /app/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @import "@nuxt/ui"; 3 | 4 | @source "../../../content/**/*"; 5 | 6 | @theme static { 7 | --container-8xl: 90rem; 8 | --font-sans: 'Public Sans', sans-serif; 9 | 10 | --color-green-50: #EFFDF5; 11 | --color-green-100: #D9FBE8; 12 | --color-green-200: #B3F5D1; 13 | --color-green-300: #75EDAE; 14 | --color-green-400: #00DC82; 15 | --color-green-500: #00C16A; 16 | --color-green-600: #00A155; 17 | --color-green-700: #007F45; 18 | --color-green-800: #016538; 19 | --color-green-900: #0A5331; 20 | --color-green-950: #052E16; 21 | } 22 | 23 | :root { 24 | --ui-container: var(--container-8xl); 25 | } 26 | -------------------------------------------------------------------------------- /content.config.ts: -------------------------------------------------------------------------------- 1 | import { defineContentConfig, defineCollection, z } from '@nuxt/content' 2 | 3 | export default defineContentConfig({ 4 | collections: { 5 | landing: defineCollection({ 6 | type: 'page', 7 | source: 'index.md' 8 | }), 9 | docs: defineCollection({ 10 | type: 'page', 11 | source: { 12 | include: '**', 13 | exclude: ['index.md'] 14 | }, 15 | schema: z.object({ 16 | links: z.array(z.object({ 17 | label: z.string(), 18 | icon: z.string(), 19 | to: z.string(), 20 | target: z.string().optional() 21 | })).optional() 22 | }) 23 | }) 24 | } 25 | }) 26 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: push 4 | 5 | jobs: 6 | ci: 7 | runs-on: ${{ matrix.os }} 8 | 9 | strategy: 10 | matrix: 11 | os: [ubuntu-latest] 12 | node: [22] 13 | 14 | steps: 15 | - name: Checkout 16 | uses: actions/checkout@v6 17 | 18 | - name: Install pnpm 19 | uses: pnpm/action-setup@v4 20 | 21 | - name: Install node 22 | uses: actions/setup-node@v6 23 | with: 24 | node-version: ${{ matrix.node }} 25 | cache: pnpm 26 | 27 | - name: Install dependencies 28 | run: pnpm install 29 | 30 | - name: Lint 31 | run: pnpm run lint 32 | 33 | - name: Typecheck 34 | run: pnpm run typecheck 35 | -------------------------------------------------------------------------------- /app/pages/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 28 | -------------------------------------------------------------------------------- /content/1.getting-started/2.installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installation 3 | description: Get started with Nuxt UI documentation template. 4 | navigation: 5 | icon: i-lucide-download 6 | --- 7 | 8 | ## Quick Start 9 | 10 | You can start a fresh new project with: 11 | 12 | ```bash [Terminal] 13 | npx nuxi init -t github:nuxt-ui-templates/docs 14 | ``` 15 | 16 | or create a new repository from GitHub: 17 | 18 | 1. Open 19 | 2. Click on `Use this template` button 20 | 3. Enter repository name and click on `Create repository from template` button 21 | 4. Clone your new repository 22 | 5. Install dependencies with your favorite package manager 23 | 6. Start development server 24 | 25 | That's it! You can now start writing your documentation in the [`content/`](https://content.nuxt.com/usage/content-directory) directory 🚀 26 | -------------------------------------------------------------------------------- /app/error.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-ui-template-docs", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "preview": "nuxt preview", 9 | "postinstall": "nuxt prepare", 10 | "lint": "eslint .", 11 | "typecheck": "nuxt typecheck" 12 | }, 13 | "dependencies": { 14 | "@iconify-json/lucide": "^1.2.75", 15 | "@iconify-json/simple-icons": "^1.2.60", 16 | "@iconify-json/vscode-icons": "^1.2.36", 17 | "@nuxt/content": "^3.8.2", 18 | "@nuxt/image": "^2.0.0", 19 | "@nuxt/ui": "^4.2.1", 20 | "@nuxtjs/mcp-toolkit": "0.5.1", 21 | "better-sqlite3": "^12.4.6", 22 | "nuxt": "^4.2.2", 23 | "nuxt-llms": "0.1.3", 24 | "nuxt-og-image": "^5.1.12", 25 | "zod": "^4.1.13" 26 | }, 27 | "devDependencies": { 28 | "@nuxt/eslint": "^1.10.0", 29 | "eslint": "^9.39.1", 30 | "typescript": "^5.9.3", 31 | "vue-tsc": "^3.1.5" 32 | }, 33 | "packageManager": "pnpm@10.23.0" 34 | } 35 | -------------------------------------------------------------------------------- /server/routes/raw/[...slug].md.get.ts: -------------------------------------------------------------------------------- 1 | import { withLeadingSlash } from 'ufo' 2 | import { stringify } from 'minimark/stringify' 3 | import { queryCollection } from '@nuxt/content/nitro' 4 | import type { Collections } from '@nuxt/content' 5 | 6 | export default eventHandler(async (event) => { 7 | const slug = getRouterParams(event)['slug.md'] 8 | if (!slug?.endsWith('.md')) { 9 | throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true }) 10 | } 11 | 12 | const path = withLeadingSlash(slug.replace('.md', '')) 13 | 14 | const page = await queryCollection(event, 'docs' as keyof Collections).path(path).first() 15 | if (!page) { 16 | throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true }) 17 | } 18 | 19 | // Add title and description to the top of the page if missing 20 | if (page.body.value[0]?.[0] !== 'h1') { 21 | page.body.value.unshift(['blockquote', {}, page.description]) 22 | page.body.value.unshift(['h1', {}, page.title]) 23 | } 24 | 25 | setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8') 26 | return stringify({ ...page.body, type: 'minimark' }, { format: 'markdown/html' }) 27 | }) 28 | -------------------------------------------------------------------------------- /app/app.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 52 | -------------------------------------------------------------------------------- /app/components/TemplateMenu.vue: -------------------------------------------------------------------------------- 1 | 50 | -------------------------------------------------------------------------------- /content/3.ai/2.llms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: LLMs Integration 3 | description: Generate AI-ready content files using Nuxt LLMs module 4 | navigation: 5 | icon: i-lucide-message-circle-code 6 | --- 7 | 8 | This documentation template integrates `nuxt-llms` by default to prepare your content for Large Language Models (LLMs). All your documentation pages are injected and `/llms.txt` and `/llms-full.txt` files are automatically generated and pre-rendered. 9 | 10 | ::prose-note{to="/llms.txt"} 11 | Have a check at the `/llms.txt` file generated for this documentation. 12 | :: 13 | 14 | ## Defaults 15 | 16 | Here are the default values use to generate the `/llms.txt` file: 17 | 18 | - `domain` → computed based on your deployment platform (or by using `NUXT_SITE_URL` env variable) 19 | - `title` → extracted from your `package.json` 20 | - `description` → extracted from your `package.json` 21 | - `full.title` → extracted from your `package.json` 22 | - `full.description` → extracted from your `package.json` 23 | 24 | ## Customize 25 | 26 | You can override your LLMs data from the `nuxt.config.ts` : 27 | 28 | ```ts [nuxt.config.ts] 29 | export default defineNuxtConfig({ 30 | llms: { 31 | domain: 'https://your-site.com', 32 | title: 'Your Site Name', 33 | description: 'A brief description of your site', 34 | full: { 35 | title: 'Your Site Name', 36 | description: 'A brief description of your site', 37 | }, 38 | }, 39 | }) 40 | ``` 41 | 42 | ::tip{to="https://github.com/nuxt-content/nuxt-llms"} 43 | Checkout the nuxt-llms documentation for more information about the module. 44 | :: 45 | -------------------------------------------------------------------------------- /app/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 73 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: [ 4 | '@nuxt/eslint', 5 | '@nuxt/image', 6 | '@nuxt/ui', 7 | '@nuxt/content', 8 | 'nuxt-og-image', 9 | 'nuxt-llms', 10 | '@nuxtjs/mcp-toolkit' 11 | ], 12 | 13 | devtools: { 14 | enabled: true 15 | }, 16 | 17 | css: ['~/assets/css/main.css'], 18 | 19 | content: { 20 | build: { 21 | markdown: { 22 | toc: { 23 | searchDepth: 1 24 | } 25 | } 26 | } 27 | }, 28 | 29 | experimental: { 30 | asyncContext: true 31 | }, 32 | 33 | compatibilityDate: '2024-07-11', 34 | 35 | nitro: { 36 | prerender: { 37 | routes: [ 38 | '/' 39 | ], 40 | crawlLinks: true, 41 | autoSubfolderIndex: false 42 | } 43 | }, 44 | 45 | eslint: { 46 | config: { 47 | stylistic: { 48 | commaDangle: 'never', 49 | braceStyle: '1tbs' 50 | } 51 | } 52 | }, 53 | 54 | icon: { 55 | provider: 'iconify' 56 | }, 57 | 58 | llms: { 59 | domain: 'https://docs-template.nuxt.dev/', 60 | title: 'Nuxt Docs Template', 61 | description: 'A template for building documentation with Nuxt UI and Nuxt Content.', 62 | full: { 63 | title: 'Nuxt Docs Template - Full Documentation', 64 | description: 'This is the full documentation for the Nuxt Docs Template.' 65 | }, 66 | sections: [ 67 | { 68 | title: 'Getting Started', 69 | contentCollection: 'docs', 70 | contentFilters: [ 71 | { field: 'path', operator: 'LIKE', value: '/getting-started%' } 72 | ] 73 | }, 74 | { 75 | title: 'Essentials', 76 | contentCollection: 'docs', 77 | contentFilters: [ 78 | { field: 'path', operator: 'LIKE', value: '/essentials%' } 79 | ] 80 | } 81 | ] 82 | }, 83 | 84 | mcp: { 85 | name: 'Docs template' 86 | } 87 | }) 88 | -------------------------------------------------------------------------------- /app/app.config.ts: -------------------------------------------------------------------------------- 1 | export default defineAppConfig({ 2 | ui: { 3 | colors: { 4 | primary: 'green', 5 | neutral: 'slate' 6 | }, 7 | footer: { 8 | slots: { 9 | root: 'border-t border-default', 10 | left: 'text-sm text-muted' 11 | } 12 | } 13 | }, 14 | seo: { 15 | siteName: 'Nuxt Docs Template' 16 | }, 17 | header: { 18 | title: '', 19 | to: '/', 20 | logo: { 21 | alt: '', 22 | light: '', 23 | dark: '' 24 | }, 25 | search: true, 26 | colorMode: true, 27 | links: [{ 28 | 'icon': 'i-simple-icons-github', 29 | 'to': 'https://github.com/nuxt-ui-templates/docs', 30 | 'target': '_blank', 31 | 'aria-label': 'GitHub' 32 | }] 33 | }, 34 | footer: { 35 | credits: `Built with Nuxt UI • © ${new Date().getFullYear()}`, 36 | colorMode: false, 37 | links: [{ 38 | 'icon': 'i-simple-icons-discord', 39 | 'to': 'https://go.nuxt.com/discord', 40 | 'target': '_blank', 41 | 'aria-label': 'Nuxt on Discord' 42 | }, { 43 | 'icon': 'i-simple-icons-x', 44 | 'to': 'https://go.nuxt.com/x', 45 | 'target': '_blank', 46 | 'aria-label': 'Nuxt on X' 47 | }, { 48 | 'icon': 'i-simple-icons-github', 49 | 'to': 'https://github.com/nuxt/ui', 50 | 'target': '_blank', 51 | 'aria-label': 'Nuxt UI on GitHub' 52 | }] 53 | }, 54 | toc: { 55 | title: 'Table of Contents', 56 | bottom: { 57 | title: 'Community', 58 | edit: 'https://github.com/nuxt-ui-templates/docs/edit/main/content', 59 | links: [{ 60 | icon: 'i-lucide-star', 61 | label: 'Star on GitHub', 62 | to: 'https://github.com/nuxt/ui', 63 | target: '_blank' 64 | }, { 65 | icon: 'i-lucide-book-open', 66 | label: 'Nuxt UI docs', 67 | to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt', 68 | target: '_blank' 69 | }] 70 | } 71 | } 72 | }) 73 | -------------------------------------------------------------------------------- /content/2.essentials/4.images-embeds.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Images and Embeds 3 | description: Add image, video, and other HTML elements 4 | navigation: 5 | icon: i-lucide-image 6 | --- 7 | 8 | ## Image 9 | 10 | ### Using Markdown 11 | 12 | Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display. 13 | 14 | ::code-preview 15 | ![Nuxt Social Image](https://nuxt.com/new-social.jpg) 16 | 17 | #code 18 | ```mdc 19 | ![Nuxt Social Image](https://nuxt.com/new-social.jpg) 20 | ``` 21 | :: 22 | 23 | ::note 24 | If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `` component will be used instead of the native `img` tag. 25 | :: 26 | 27 | ### Using Embeds 28 | 29 | Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling. 30 | 31 | ::code-preview 32 | ![Nuxt Social Image](https://nuxt.com/new-social.jpg){height="150"} 33 | 34 | 35 | 36 | #code 37 | ```mdc 38 | :img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"} 39 | ``` 40 | :: 41 | 42 | ## Embeds and HTML elements 43 | 44 | Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content. 45 | 46 | ::code-preview 47 | --- 48 | class: "[&>div]:*:w-full" 49 | --- 50 | :iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} 51 | 52 | 53 | #code 54 | ```mdc 55 | :iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} 56 | ``` 57 | :: 58 | -------------------------------------------------------------------------------- /server/mcp/tools/list-pages.ts: -------------------------------------------------------------------------------- 1 | import { queryCollection } from '@nuxt/content/server' 2 | 3 | export default defineMcpTool({ 4 | description: `Lists all available documentation pages with their categories and basic information. 5 | 6 | WHEN TO USE: Use this tool when you need to EXPLORE or SEARCH for documentation about a topic but don't know the exact page path. Common scenarios: 7 | - "Find documentation about markdown features" - explore available guides 8 | - "Show me all getting started guides" - browse introductory content 9 | - "Search for advanced configuration options" - find specific topics 10 | - User asks general questions without specifying exact pages 11 | - You need to understand the overall documentation structure 12 | 13 | WHEN NOT TO USE: If you already know the specific page path (e.g., "/getting-started/installation"), use get-page directly instead. 14 | 15 | WORKFLOW: This tool returns page titles, descriptions, and paths. After finding relevant pages, use get-page to retrieve the full content of specific pages that match the user's needs. 16 | 17 | OUTPUT: Returns a structured list with: 18 | - title: Human-readable page name 19 | - path: Exact path for use with get-page 20 | - description: Brief summary of page content 21 | - url: Full URL for reference`, 22 | cache: '1h', 23 | handler: async () => { 24 | const event = useEvent() 25 | const siteUrl = import.meta.dev ? 'http://localhost:3000' : getRequestURL(event).origin 26 | 27 | try { 28 | const pages = await queryCollection(event, 'docs') 29 | .select('title', 'path', 'description') 30 | .all() 31 | 32 | const result = pages.map(page => ({ 33 | title: page.title, 34 | path: page.path, 35 | description: page.description, 36 | url: `${siteUrl}${page.path}` 37 | })) 38 | 39 | return { 40 | content: [{ type: 'text', text: JSON.stringify(result, null, 2) }] 41 | } 42 | } catch { 43 | return { 44 | content: [{ type: 'text', text: 'Failed to list pages' }], 45 | isError: true 46 | } 47 | } 48 | } 49 | }) 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt Docs Template 2 | 3 | [![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com) 4 | 5 | Use this template to build your own documentation with [Nuxt UI](https://ui.nuxt.com) quickly. 6 | 7 | - [Live demo](https://docs-template.nuxt.dev/) 8 | - [Documentation](https://ui.nuxt.com/docs/getting-started/installation) 9 | 10 | 11 | 12 | 13 | 14 | Nuxt Docs Template 15 | 16 | 17 | 18 | ## Quick Start 19 | 20 | ```bash [Terminal] 21 | npm create nuxt@latest -- -t github:nuxt-ui-templates/docs 22 | ``` 23 | 24 | ## Deploy your own 25 | 26 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=docs&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fdocs&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fdocs-dark.png&demo-url=https%3A%2F%2Fdocs-template.nuxt.dev%2F&demo-title=Nuxt%20Docs%20Template&demo-description=A%20documentation%20template%20powered%20by%20Nuxt%20Content.) 27 | 28 | ## Setup 29 | 30 | Make sure to install the dependencies: 31 | 32 | ```bash 33 | pnpm install 34 | ``` 35 | 36 | ## Development Server 37 | 38 | Start the development server on `http://localhost:3000`: 39 | 40 | ```bash 41 | pnpm dev 42 | ``` 43 | 44 | ## Production 45 | 46 | Build the application for production: 47 | 48 | ```bash 49 | pnpm build 50 | ``` 51 | 52 | Locally preview production build: 53 | 54 | ```bash 55 | pnpm preview 56 | ``` 57 | 58 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 59 | 60 | ## Renovate integration 61 | 62 | Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go. 63 | -------------------------------------------------------------------------------- /app/components/PageHeaderLinks.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 81 | -------------------------------------------------------------------------------- /server/mcp/tools/get-page.ts: -------------------------------------------------------------------------------- 1 | import { z } from 'zod' 2 | import { queryCollection } from '@nuxt/content/server' 3 | 4 | export default defineMcpTool({ 5 | description: `Retrieves the full content and details of a specific documentation page. 6 | 7 | WHEN TO USE: Use this tool when you know the EXACT path to a documentation page. Common use cases: 8 | - User asks for a specific page: "Show me the getting started guide" → /getting-started 9 | - User asks about a known topic with a dedicated page 10 | - You found a relevant path from list-pages and want the full content 11 | - User references a specific section or guide they want to read 12 | 13 | WHEN NOT TO USE: If you don't know the exact path and need to search/explore, use list-pages first. 14 | 15 | WORKFLOW: This tool returns the complete page content including title, description, and full markdown. Use this when you need to provide detailed answers or code examples from specific documentation pages.`, 16 | inputSchema: { 17 | path: z.string().describe('The page path from list-pages or provided by the user (e.g., /getting-started/installation)') 18 | }, 19 | cache: '1h', 20 | handler: async ({ path }) => { 21 | const event = useEvent() 22 | const siteUrl = import.meta.dev ? 'http://localhost:3000' : getRequestURL(event).origin 23 | 24 | try { 25 | const page = await queryCollection(event, 'docs') 26 | .where('path', '=', path) 27 | .select('title', 'path', 'description') 28 | .first() 29 | 30 | if (!page) { 31 | return { 32 | content: [{ type: 'text', text: 'Page not found' }], 33 | isError: true 34 | } 35 | } 36 | 37 | const content = await $fetch(`/raw${path}.md`, { 38 | baseURL: siteUrl 39 | }) 40 | 41 | const result = { 42 | title: page.title, 43 | path: page.path, 44 | description: page.description, 45 | content, 46 | url: `${siteUrl}${page.path}` 47 | } 48 | 49 | return { 50 | content: [{ type: 'text', text: JSON.stringify(result, null, 2) }] 51 | } 52 | } catch { 53 | return { 54 | content: [{ type: 'text', text: 'Failed to get page' }], 55 | isError: true 56 | } 57 | } 58 | } 59 | }) 60 | -------------------------------------------------------------------------------- /app/components/content/HeroBackground.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 89 | -------------------------------------------------------------------------------- /content/1.getting-started/1.index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: Welcome to Nuxt UI documentation template. 4 | navigation: 5 | icon: i-lucide-house 6 | --- 7 | 8 | This template is a ready-to-use documentation template made with [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes. 9 | 10 | There are already many websites based on this template: 11 | 12 | ::card-group 13 | :::card 14 | --- 15 | icon: i-simple-icons-nuxtdotjs 16 | target: _blank 17 | title: Nuxt 18 | to: https://nuxt.com 19 | --- 20 | The Nuxt website 21 | ::: 22 | 23 | :::card 24 | --- 25 | icon: i-simple-icons-nuxtdotjs 26 | target: _blank 27 | title: Nuxt UI 28 | to: https://ui.nuxt.com 29 | --- 30 | The documentation of `@nuxt/ui` 31 | ::: 32 | 33 | :::card 34 | --- 35 | icon: i-simple-icons-nuxtdotjs 36 | target: _blank 37 | title: Nuxt Image 38 | to: https://image.nuxt.com 39 | --- 40 | The documentation of `@nuxt/image` 41 | ::: 42 | 43 | :::card 44 | --- 45 | icon: i-simple-icons-nuxtdotjs 46 | target: _blank 47 | title: Nuxt Content 48 | to: https://content.nuxt.com 49 | --- 50 | The documentation of `@nuxt/content` 51 | ::: 52 | 53 | :::card 54 | --- 55 | icon: i-simple-icons-nuxtdotjs 56 | target: _blank 57 | title: Nuxt Devtools 58 | to: https://devtools.nuxt.com 59 | --- 60 | The documentation of `@nuxt/devtools` 61 | ::: 62 | 63 | :::card 64 | --- 65 | icon: i-simple-icons-nuxtdotjs 66 | target: _blank 67 | title: Nuxt Hub 68 | to: https://hub.nuxt.com 69 | --- 70 | The best place to manage your projects, environments and variables. 71 | ::: 72 | :: 73 | 74 | ## Key Features 75 | 76 | This template includes a range of features designed to streamline documentation management: 77 | 78 | - **Powered by** [**Nuxt**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance. 79 | - **Built with** [**Nuxt UI**](https://ui.nuxt.com): Integrates a comprehensive suite of UI components. 80 | - [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content. 81 | - **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure. 82 | - **Full-Text Search**: Includes built-in search functionality for content discovery. 83 | - **Optimized Typography**: Features refined typography for enhanced readability. 84 | - **Dark Mode**: Offers dark mode support for user preference. 85 | - **Extensive Functionality**: Explore the template to fully appreciate its capabilities. 86 | -------------------------------------------------------------------------------- /app/components/OgImage/OgImageDocs.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 77 | -------------------------------------------------------------------------------- /app/pages/[...slug].vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 115 | -------------------------------------------------------------------------------- /app/components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 41 | -------------------------------------------------------------------------------- /content/1.getting-started/3.usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Usage 3 | description: Learn how to write and customize your documentation. 4 | navigation: 5 | icon: i-lucide-sliders 6 | --- 7 | 8 | This is only a basic example of what you can achieve with [Nuxt UI](https://ui.nuxt.com), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews. 9 | 10 | ::tip 11 | --- 12 | target: _blank 13 | to: https://ui.nuxt.com/getting-started/installation 14 | --- 15 | Learn more on how to take the most out of Nuxt UI! 16 | :: 17 | 18 | ## Writing content 19 | 20 | You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search. 21 | 22 | ## App Configuration 23 | 24 | In addition to `@nuxt/ui` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components. 25 | 26 | ### Header 27 | 28 | ```ts [app.config.ts] 29 | export default defineAppConfig({ 30 | header: { 31 | title: '', 32 | to: '/', 33 | // Logo configuration 34 | logo: { 35 | alt: '', 36 | // Light mode 37 | light: '', 38 | // Dark mode 39 | dark: '' 40 | }, 41 | // Show or hide the search bar 42 | search: true, 43 | // Show or hide the color mode button 44 | colorMode: true, 45 | // Customize links 46 | links: [{ 47 | 'icon': 'i-simple-icons-github', 48 | 'to': 'https://github.com/nuxt-ui-templates/docs', 49 | 'target': '_blank', 50 | 'aria-label': 'GitHub' 51 | }] 52 | }, 53 | }) 54 | ``` 55 | 56 | ### Footer 57 | 58 | ```ts [app.config.ts] 59 | export default defineAppConfig({ 60 | footer: { 61 | // Update bottom left credits 62 | credits: `Built with Nuxt UI • © ${new Date().getFullYear()}`, 63 | // Show or hide the color mode button 64 | colorMode: false, 65 | // Customize links 66 | links: [{ 67 | 'icon': 'i-simple-icons-discord', 68 | 'to': 'https://go.nuxt.com/discord', 69 | 'target': '_blank', 70 | 'aria-label': 'Nuxt on Discord' 71 | }, { 72 | 'icon': 'i-simple-icons-x', 73 | 'to': 'https://go.nuxt.com/x', 74 | 'target': '_blank', 75 | 'aria-label': 'Nuxt on X' 76 | }, { 77 | 'icon': 'i-simple-icons-github', 78 | 'to': 'https://github.com/nuxt/ui', 79 | 'target': '_blank', 80 | 'aria-label': 'Nuxt UI on GitHub' 81 | }] 82 | }, 83 | }) 84 | ``` 85 | 86 | ### Table of contents 87 | 88 | ```ts [app.config.ts] 89 | export default defineAppConfig({ 90 | toc: { 91 | // Title of the main table of contents 92 | title: 'Table of Contents', 93 | // Customize links 94 | bottom: { 95 | // Title of the bottom table of contents 96 | title: 'Community', 97 | // URL of your repository content folder 98 | edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content', 99 | links: [{ 100 | icon: 'i-lucide-star', 101 | label: 'Star on GitHub', 102 | to: 'https://github.com/nuxt/ui', 103 | target: '_blank' 104 | }, { 105 | icon: 'i-lucide-book-open', 106 | label: 'Nuxt UI docs', 107 | to: 'https://ui.nuxt.com/getting-started/installation', 108 | target: '_blank' 109 | }] 110 | } 111 | } 112 | }) 113 | ``` 114 | -------------------------------------------------------------------------------- /app/components/content/StarsBg.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 148 | 149 | 184 | -------------------------------------------------------------------------------- /content/2.essentials/1.markdown-syntax.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Syntax 3 | description: Text, title, and styling in standard markdown. 4 | navigation: 5 | icon: i-lucide-heading-1 6 | --- 7 | 8 | ## Titles 9 | 10 | Use titles to introduce main sections. They structure your documentation and help users navigate content. 11 | 12 | ::code-preview 13 | --- 14 | class: "[&>div]:*:my-0" 15 | --- 16 | ## Titles 17 | 18 | #code 19 | ```mdc 20 | ## Titles 21 | ``` 22 | :: 23 | 24 | ### Subtitles 25 | 26 | Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability. 27 | 28 | ::code-preview 29 | --- 30 | class: "[&>div]:*:my-0" 31 | --- 32 | ### Subtitles 33 | 34 | #code 35 | ```mdc 36 | ### Subtitles 37 | ``` 38 | :: 39 | 40 | ::tip 41 | Each title and subtitle creates an anchor and shows up automatically in the table of contents. 42 | :: 43 | 44 | ## Text Formatting 45 | 46 | Nuxt UI supports most Markdown formatting options. 47 | 48 | | Style | How to use | Result | 49 | | ------ | ------------ | ---------- | 50 | | Bold | `**bold**` | **Bold** | 51 | | Italic | `*italic*` | *Italic* | 52 | | Strike | `~~strike~~` | ~~Strike~~ | 53 | 54 | Combine formatting for richer text styles and visual emphasis. 55 | 56 | | Style | How to use | Result | 57 | | ------------- | ------------------- | ----------------- | 58 | | Bold Italic | `**_bold italic_**` | ***Bold Italic*** | 59 | | Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | 60 | | Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | 61 | 62 | For exponents, indices, or mathematical notations, use HTML `` and `` tags. 63 | 64 | | Style | How to use | Result | 65 | | ----------- | ------------------------ | ----------- | 66 | | Superscript | `superscript` | superscript | 67 | | Subscript | `subscript` | subscript | 68 | 69 | ## Links 70 | 71 | Links connect different parts of your documentation and external resources, essential for user navigation and providing references. 72 | To create a link, wrap the link text in brackets `[]()`. 73 | 74 | ::code-preview 75 | --- 76 | class: "[&>div]:*:my-0" 77 | --- 78 | [Nuxt UI](https://ui.nuxt.com/getting-started/installation) 79 | 80 | #code 81 | ```mdc 82 | [Nuxt UI](https://ui.nuxt.com/getting-started/installation) 83 | ``` 84 | :: 85 | 86 | ### Internal links 87 | 88 | For linking within your documentation, use root-relative paths like `/getting-started/installation`. 89 | 90 | ::code-preview 91 | --- 92 | class: "[&>div]:*:my-0" 93 | --- 94 | [Installation](/getting-started/installation) 95 | 96 | #code 97 | ```mdc 98 | [Installation](/getting-started/installation) 99 | ``` 100 | :: 101 | 102 | ## Lists 103 | 104 | Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs. 105 | 106 | ### Unordered 107 | 108 | Use unordered lists for items without a specific sequence. Start each item with a `-` symbol. 109 | 110 | ::code-preview 111 | --- 112 | class: "[&>div]:*:my-0" 113 | --- 114 | - I'm a list item. 115 | - I'm another list item. 116 | - I'm the last list item. 117 | 118 | #code 119 | ```mdc 120 | - I'm a list item. 121 | - I'm another list item. 122 | - I'm the last list item. 123 | ``` 124 | :: 125 | 126 | ### Ordered 127 | 128 | Use ordered lists when item order matters, like steps in a process. Start each item with a number. 129 | 130 | ::code-preview 131 | --- 132 | class: "[&>div]:*:my-0" 133 | --- 134 | 1. I'm a list item. 135 | 2. I'm another list item. 136 | 3. I'm the last list item. 137 | 138 | #code 139 | ```mdc 140 | 1. I'm a list item. 141 | 2. I'm another list item. 142 | 3. I'm the last list item. 143 | ``` 144 | :: 145 | 146 | ### Nested 147 | 148 | Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting. 149 | 150 | ::code-preview 151 | --- 152 | class: "[&>div]:*:my-0" 153 | --- 154 | - I'm a list item. 155 | - I'm a nested list item. 156 | - I'm another nested list item. 157 | - I'm another list item. 158 | 159 | #code 160 | ```mdc 161 | - I'm a list item. 162 | - I'm a nested list item. 163 | - I'm another nested list item. 164 | - I'm another list item. 165 | ``` 166 | :: 167 | 168 | ## Tables 169 | 170 | Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties. 171 | 172 | ::code-preview 173 | --- 174 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 175 | --- 176 | | Prop | Default | Type | 177 | | ------- | --------- | -------- | 178 | | `name` | | `string` | 179 | | `size` | `md` | `string` | 180 | | `color` | `neutral` | `string` | 181 | 182 | #code 183 | ```mdc 184 | | Prop | Default | Type | 185 | |---------|-----------|--------------------------| 186 | | `name` | | `string`{lang="ts-type"} | 187 | | `size` | `md` | `string`{lang="ts-type"} | 188 | | `color` | `neutral` | `string`{lang="ts-type"} | 189 | ``` 190 | :: 191 | 192 | ## Blockquotes 193 | 194 | Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content. 195 | 196 | ### Singleline 197 | 198 | Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes. 199 | 200 | ::code-preview 201 | --- 202 | class: "[&>div]:*:my-0" 203 | --- 204 | > Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. 205 | 206 | #code 207 | ```mdc 208 | > Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. 209 | ``` 210 | :: 211 | 212 | ### Multiline 213 | 214 | Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation. 215 | 216 | ::code-preview 217 | --- 218 | class: "[&>div]:*:my-0" 219 | --- 220 | > Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. 221 | > 222 | > Create beautiful, responsive, and accessible Vue applications with Nuxt UI. 223 | 224 | #code 225 | ```mdc 226 | > Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces. 227 | > 228 | > Create beautiful, responsive, and accessible Vue applications with Nuxt UI. 229 | ``` 230 | :: 231 | -------------------------------------------------------------------------------- /content/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | seo: 3 | title: Nuxt Docs Template 4 | description: Create stunning, fast and SEO-optimized documentation sites with Nuxt UI. 5 | --- 6 | 7 | ::u-page-hero{class="dark:bg-gradient-to-b from-neutral-900 to-neutral-950"} 8 | --- 9 | orientation: horizontal 10 | --- 11 | #top 12 | :hero-background 13 | 14 | #title 15 | Ship Beautiful [Documentation]{.text-primary}. 16 | 17 | #description 18 | Build professional documentation with Nuxt UI's powerful components, enhanced typography, and seamless Nuxt Content integration. The same system trusted by the entire [Nuxt ecosystem](https://nuxt.com). 19 | 20 | #links 21 | :::u-button 22 | --- 23 | to: /getting-started 24 | size: xl 25 | trailing-icon: i-lucide-arrow-right 26 | --- 27 | Get started 28 | ::: 29 | 30 | :::u-button 31 | --- 32 | icon: i-simple-icons-github 33 | color: neutral 34 | variant: outline 35 | size: xl 36 | to: https://github.com/nuxt-ui-templates/docs 37 | target: _blank 38 | --- 39 | Use this template 40 | ::: 41 | 42 | #default 43 | :::prose-pre 44 | --- 45 | code: | 46 | export default defineNuxtConfig({ 47 | modules: [ 48 | '@nuxt/ui', 49 | '@nuxt/content', 50 | 'nuxt-og-image', 51 | 'nuxt-llms' 52 | ], 53 | 54 | css: ['~/assets/css/main.css'] 55 | }) 56 | filename: nuxt.config.ts 57 | --- 58 | 59 | ```ts [nuxt.config.ts] 60 | export default defineNuxtConfig({ 61 | modules: [ 62 | '@nuxt/ui', 63 | '@nuxt/content', 64 | 'nuxt-og-image', 65 | 'nuxt-llms' 66 | ], 67 | 68 | css: ['~/assets/css/main.css'] 69 | }) 70 | ``` 71 | ::: 72 | :: 73 | 74 | ::u-page-section{class="dark:bg-neutral-950"} 75 | #title 76 | Powered by Nuxt UI components 77 | 78 | #links 79 | :::u-button 80 | --- 81 | color: neutral 82 | size: lg 83 | target: _blank 84 | to: https://ui.nuxt.com/docs/getting-started/installation/nuxt 85 | trailingIcon: i-lucide-arrow-right 86 | variant: subtle 87 | --- 88 | Explore Nuxt UI 89 | ::: 90 | 91 | #features 92 | :::u-page-feature 93 | --- 94 | icon: i-lucide-palette 95 | --- 96 | #title 97 | 100+ UI Components 98 | 99 | #description 100 | Access the complete Nuxt UI component library. From badges to modals, everything styled and accessible out of the box. 101 | ::: 102 | 103 | :::u-page-feature 104 | --- 105 | icon: i-lucide-type 106 | --- 107 | #title 108 | Beautiful Typography 109 | 110 | #description 111 | Pre-styled prose components with perfect visual harmony. No need for @tailwindcss/typography - get precise control over every element. 112 | ::: 113 | 114 | :::u-page-feature 115 | --- 116 | icon: i-lucide-layers 117 | --- 118 | #title 119 | Rich Prose Components 120 | 121 | #description 122 | Accordions, cards, callouts, tabs, steps, code blocks, and more - all provided by Nuxt UI for interactive documentation. 123 | ::: 124 | 125 | :::u-page-feature 126 | --- 127 | icon: i-lucide-search 128 | --- 129 | #title 130 | Built-in Search 131 | 132 | #description 133 | Full-text search with ContentSearch component. No need for Algolia - instant, relevant results with keyboard shortcuts (⌘K). 134 | ::: 135 | 136 | :::u-page-feature 137 | --- 138 | icon: i-lucide-navigation 139 | --- 140 | #title 141 | Smart Navigation 142 | 143 | #description 144 | Auto-generated navigation with ContentNavigation and ContentToc components. Sticky table of contents and prev/next links. 145 | ::: 146 | 147 | :::u-page-feature 148 | --- 149 | icon: i-lucide-moon 150 | --- 151 | #title 152 | Dark Mode Ready 153 | 154 | #description 155 | Automatic theme switching with smooth transitions. Respects system preferences and remembers user choice. 156 | ::: 157 | :: 158 | 159 | ::u-page-section{class="dark:bg-neutral-950"} 160 | #title 161 | Enhanced with Nuxt Content 162 | 163 | #links 164 | :::u-button 165 | --- 166 | color: neutral 167 | size: lg 168 | target: _blank 169 | to: https://content.nuxt.com/docs/getting-started/installation 170 | trailingIcon: i-lucide-arrow-right 171 | variant: subtle 172 | --- 173 | Explore Nuxt Content 174 | ::: 175 | 176 | #features 177 | :::u-page-feature 178 | --- 179 | icon: i-simple-icons-markdown 180 | --- 181 | #title 182 | MDC Enhanced Markdown 183 | 184 | #description 185 | Write in Markdown while embedding Vue components. Seamlessly integrate interactive elements in your content. 186 | ::: 187 | 188 | :::u-page-feature 189 | --- 190 | icon: i-lucide-file-text 191 | --- 192 | #title 193 | File-based Routing 194 | 195 | #description 196 | Organize content in folders and files. Your documentation structure automatically becomes your navigation. 197 | ::: 198 | 199 | :::u-page-feature 200 | --- 201 | icon: i-lucide-code 202 | --- 203 | #title 204 | Syntax Highlighting 205 | 206 | #description 207 | Beautiful code blocks with language detection, line numbers, and copy buttons. Support for 100+ languages. 208 | ::: 209 | 210 | :::u-page-feature 211 | --- 212 | icon: i-lucide-database 213 | --- 214 | #title 215 | Content Database 216 | 217 | #description 218 | Query your content with a MongoDB-like API. Filter, sort, and search through your documentation programmatically. 219 | ::: 220 | 221 | :::u-page-feature 222 | --- 223 | icon: i-lucide-file-code 224 | --- 225 | #title 226 | Frontmatter Support 227 | 228 | #description 229 | Add metadata to your content files. Define SEO tags, navigation properties, and custom fields. 230 | ::: 231 | 232 | :::u-page-feature 233 | --- 234 | icon: i-lucide-git-branch 235 | --- 236 | #title 237 | Version Control 238 | 239 | #description 240 | Content lives in your repository. Branch, review, and deploy documentation alongside your code. 241 | ::: 242 | :: 243 | 244 | ::u-page-section{class="dark:bg-gradient-to-b from-neutral-950 to-neutral-900"} 245 | :::u-page-c-t-a 246 | --- 247 | links: 248 | - label: Start building 249 | to: '/getting-started' 250 | trailingIcon: i-lucide-arrow-right 251 | - label: View on GitHub 252 | to: 'https://github.com/nuxt-ui-templates/docs' 253 | target: _blank 254 | variant: subtle 255 | icon: i-simple-icons-github 256 | title: Ready to build an amazing documentation? 257 | description: Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today. 258 | class: dark:bg-neutral-950 259 | --- 260 | 261 | :stars-bg 262 | ::: 263 | :: 264 | -------------------------------------------------------------------------------- /content/3.ai/1.mcp.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MCP Server 3 | description: Connect your documentation to AI tools with a native MCP server. 4 | navigation: 5 | icon: i-lucide-cpu 6 | --- 7 | 8 | ## About MCP Servers 9 | 10 | The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open protocol that creates standardized connections between AI applications and external services, like documentation. 11 | 12 | This documentation template includes a built-in MCP server, preparing your content for the broader AI ecosystem where any MCP client (like Claude, Cursor, VS Code, and others) can connect to your documentation. 13 | 14 | ### How MCP Servers Work 15 | 16 | When an MCP server is connected to an AI tool, the LLM can decide to use your documentation tools during response generation: 17 | 18 | - The LLM can **proactively search your documentation** while generating a response, not just when explicitly asked. 19 | - The LLM determines **when to use tools** based on the context of the conversation and the relevance of your documentation. 20 | - Each tool call happens **during the generation process**, allowing the LLM to incorporate real-time information from your documentation into its response. 21 | 22 | For example, if a user asks a coding question and the LLM determines that your documentation is relevant, it can search your docs and include that information in the response without the user explicitly asking about your documentation. 23 | 24 | ## Accessing Your MCP Server 25 | 26 | Your MCP server is automatically available at the `/mcp` path of your documentation URL. 27 | 28 | ::prose-note 29 | For example, if your documentation is hosted at `https://docs.example.com`, your MCP server URL is `https://docs.example.com/mcp`. 30 | :: 31 | 32 | ## Disable the MCP Server 33 | 34 | If you want to disable the MCP server, you can do so in your `nuxt.config.ts`: 35 | 36 | ```ts [nuxt.config.ts] 37 | export default defineNuxtConfig({ 38 | mcp: { 39 | enabled: false, 40 | }, 41 | }) 42 | ``` 43 | 44 | ## Built-in Tools 45 | 46 | This template provides two tools out of the box that allow any LLM to discover and read your documentation: 47 | 48 | ### `list-pages` 49 | 50 | Lists all documentation pages with their titles, paths, and descriptions. AI assistants should call this first to discover available content. 51 | 52 | | Parameter | Type | Description | 53 | |-----------|------|-------------| 54 | | `locale` | string (optional) | Filter pages by locale | 55 | 56 | ### `get-page` 57 | 58 | Retrieves the full markdown content of a specific documentation page. 59 | 60 | | Parameter | Type | Description | 61 | |-----------|------|-------------| 62 | | `path` | string (required) | The page path (e.g., `/en/getting-started/installation`) | 63 | 64 | ## Setup 65 | 66 | The MCP server uses HTTP transport and can be installed in different AI assistants. 67 | 68 | ### Claude Code 69 | 70 | Add the server using the CLI command: 71 | 72 | ```bash 73 | claude mcp add --transport http my-docs https://docs.example.com/mcp 74 | ``` 75 | 76 | ### Cursor 77 | 78 | ::install-button 79 | --- 80 | url: "https://docs.example.com/mcp" 81 | ide: "cursor" 82 | label: "Install in Cursor" 83 | --- 84 | :: 85 | 86 | Or manually create/update `.cursor/mcp.json` in your project root: 87 | 88 | ```json [.cursor/mcp.json] 89 | { 90 | "mcpServers": { 91 | "my-docs": { 92 | "type": "http", 93 | "url": "https://docs.example.com/mcp" 94 | } 95 | } 96 | } 97 | ``` 98 | 99 | ### Visual Studio Code 100 | 101 | Ensure you have GitHub Copilot and GitHub Copilot Chat extensions installed. 102 | 103 | ::install-button 104 | --- 105 | url: "https://docs.example.com/mcp" 106 | ide: "vscode" 107 | label: "Install in VS Code" 108 | --- 109 | :: 110 | 111 | Or manually create/update the `.vscode/mcp.json` file: 112 | 113 | ```json [.vscode/mcp.json] 114 | { 115 | "servers": { 116 | "my-docs": { 117 | "type": "http", 118 | "url": "https://docs.example.com/mcp" 119 | } 120 | } 121 | } 122 | ``` 123 | 124 | ### Windsurf 125 | 126 | 1. Open Windsurf and navigate to **Settings** > **Windsurf Settings** > **Cascade** 127 | 2. Click the **Manage MCPs** button, then select the **View raw config** option 128 | 3. Add the following configuration: 129 | 130 | ```json [.codeium/windsurf/mcp_config.json] 131 | { 132 | "mcpServers": { 133 | "my-docs": { 134 | "type": "http", 135 | "url": "https://docs.example.com/mcp" 136 | } 137 | } 138 | } 139 | ``` 140 | 141 | ### Zed 142 | 143 | 1. Open Zed and go to **Settings** > **Open Settings** 144 | 2. Navigate to the JSON settings file 145 | 3. Add the following context server configuration: 146 | 147 | ```json [.config/zed/settings.json] 148 | { 149 | "context_servers": { 150 | "my-docs": { 151 | "source": "custom", 152 | "command": "npx", 153 | "args": ["mcp-remote", "https://docs.example.com/mcp"], 154 | "env": {} 155 | } 156 | } 157 | } 158 | ``` 159 | 160 | ## Customization 161 | 162 | Since this template uses the [`@nuxtjs/mcp-toolkit`](https://mcp-toolkit.nuxt.dev/) module, you can extend the MCP server with custom tools, resources, prompts, and handlers. 163 | 164 | ### Adding Custom Tools 165 | 166 | Create new tools in the `server/mcp/tools/` directory: 167 | 168 | ```ts [server/mcp/tools/search.ts] 169 | import { z } from 'zod' 170 | 171 | export default defineMcpTool({ 172 | description: 'Search documentation by keyword', 173 | inputSchema: { 174 | query: z.string().describe('The search query'), 175 | }, 176 | handler: async ({ query }) => { 177 | const results = await searchDocs(query) 178 | return { 179 | content: [{ type: 'text', text: JSON.stringify(results) }], 180 | } 181 | }, 182 | }) 183 | ``` 184 | 185 | ### Adding Resources 186 | 187 | Expose files or data sources as MCP resources in the `server/mcp/resources/` directory. The simplest way is using the `file` property: 188 | 189 | ```ts [server/mcp/resources/changelog.ts] 190 | export default defineMcpResource({ 191 | file: 'CHANGELOG.md', 192 | metadata: { 193 | description: 'Project changelog', 194 | }, 195 | }) 196 | ``` 197 | 198 | This automatically handles URI generation, MIME type detection, and file reading. 199 | 200 | ### Adding Prompts 201 | 202 | Create reusable prompts for AI assistants in the `server/mcp/prompts/` directory: 203 | 204 | ```ts [server/mcp/prompts/migration-help.ts] 205 | import { z } from 'zod' 206 | 207 | export default defineMcpPrompt({ 208 | description: 'Get help with migrating between versions', 209 | inputSchema: { 210 | fromVersion: z.string().describe('Current version'), 211 | toVersion: z.string().describe('Target version'), 212 | }, 213 | handler: async ({ fromVersion, toVersion }) => { 214 | return { 215 | messages: [{ 216 | role: 'user', 217 | content: { 218 | type: 'text', 219 | text: `Help me migrate from version ${fromVersion} to ${toVersion}. What are the breaking changes and steps I need to follow?`, 220 | }, 221 | }], 222 | } 223 | }, 224 | }) 225 | ``` 226 | 227 | ### Adding Custom Handlers 228 | 229 | Handlers allow you to create separate MCP endpoints with their own tools, resources, and prompts. This is useful for exposing different capabilities at different routes. 230 | 231 | For example, you could have: 232 | - `/mcp` - Main documentation MCP server 233 | - `/mcp/migration` - Dedicated MCP server for migration assistance 234 | 235 | ```ts [server/mcp/migration.ts] 236 | import { z } from 'zod' 237 | 238 | const migrationTool = defineMcpTool({ 239 | name: 'migrate-v3-to-v4', 240 | description: 'Migrate code from version 3 to version 4', 241 | inputSchema: { 242 | code: z.string().describe('The code to migrate'), 243 | }, 244 | handler: async ({ code }) => { 245 | // Migration logic 246 | return { 247 | content: [{ type: 'text', text: migratedCode }], 248 | } 249 | }, 250 | }) 251 | 252 | export default defineMcpHandler({ 253 | route: '/mcp/migration', 254 | name: 'Migration Assistant', 255 | version: '1.0.0', 256 | tools: [migrationTool], 257 | }) 258 | ``` 259 | 260 | ### Overwriting Built-in Tools 261 | 262 | You can override the default `list-pages` or `get-page` tools by creating a tool with the same name in your project: 263 | 264 | ```ts [server/mcp/tools/list-pages.ts] 265 | import { z } from 'zod' 266 | 267 | export default defineMcpTool({ 268 | description: 'Custom list pages implementation', 269 | inputSchema: { 270 | locale: z.string().optional(), 271 | category: z.string().optional(), 272 | }, 273 | handler: async ({ locale, category }) => { 274 | const pages = await getCustomPageList(locale, category) 275 | return { 276 | content: [{ type: 'text', text: JSON.stringify(pages) }], 277 | } 278 | }, 279 | }) 280 | ``` 281 | 282 | ::tip{to="https://mcp-toolkit.nuxt.dev/"} 283 | Check the MCP Toolkit documentation for more information about tools, resources, prompts, handlers and advanced configuration. 284 | :: 285 | -------------------------------------------------------------------------------- /content/2.essentials/2.code-blocks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code Blocks 3 | description: Display inline code and code blocks 4 | navigation: 5 | icon: i-lucide-code-xml 6 | --- 7 | 8 | ## Basic 9 | 10 | ### Inline Code 11 | 12 | Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences. 13 | 14 | ::code-preview 15 | --- 16 | class: "[&>div]:*:my-0" 17 | --- 18 | `inline code` 19 | 20 | #code 21 | ```mdc 22 | `inline code` 23 | ``` 24 | :: 25 | 26 | ### Code Blocks 27 | 28 | Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly. 29 | 30 | ::code-preview 31 | --- 32 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 33 | --- 34 | ```ts 35 | export default defineNuxtConfig({ 36 | modules: ['@nuxt/ui'] 37 | }) 38 | ``` 39 | 40 | #code 41 | ````mdc 42 | ```ts 43 | export default defineNuxtConfig({ 44 | modules: ['@nuxt/ui'] 45 | }) 46 | ``` 47 | ```` 48 | :: 49 | 50 | When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. 51 | Filenames help users understand the code's location and purpose within a project. 52 | 53 | ::code-preview 54 | --- 55 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 56 | --- 57 | ```ts [nuxt.config.ts] 58 | export default defineNuxtConfig({ 59 | modules: ['@nuxt/ui'] 60 | }) 61 | ``` 62 | 63 | #code 64 | ````mdc 65 | ```ts [nuxt.config.ts] 66 | export default defineNuxtConfig({ 67 | modules: ['@nuxt/ui'] 68 | }) 69 | ``` 70 | ```` 71 | :: 72 | 73 | ::tip 74 | Some icons are already defined by default, but you can add more in your `app.config.ts` through the `ui.prose.codeIcon` key: 75 | 76 | ```ts [app.config.ts] 77 | export default defineAppConfig({ 78 | ui: { 79 | prose: { 80 | codeIcon: { 81 | terminal: 'i-ph-terminal-window-duotone' 82 | } 83 | } 84 | } 85 | }) 86 | ``` 87 | :: 88 | 89 | Every code-block has a built-in copy button that will copy the code to your clipboard. 90 | 91 | ::tip 92 | You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys: 93 | 94 | ```ts [app.config.ts] 95 | export default defineAppConfig({ 96 | ui: { 97 | icons: { 98 | copy: 'i-lucide-copy', 99 | copyCheck: 'i-lucide-copy-check' 100 | } 101 | } 102 | }) 103 | ``` 104 | :: 105 | 106 | #### Highlight Line 107 | 108 | To highlight lines of code, add `{}` around the line numbers you want to highlight. 109 | Line highlighting is useful for focusing users on important parts of code examples. 110 | 111 | ::code-preview 112 | --- 113 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 114 | --- 115 | ```ts [nuxt.config.ts]{4-5} 116 | export default defineAppConfig({ 117 | ui: { 118 | icons: { 119 | copy: 'i-lucide-copy', 120 | copyCheck: 'i-lucide-copy-check' 121 | } 122 | } 123 | }) 124 | ``` 125 | 126 | #code 127 | ````mdc 128 | ```ts [nuxt.config.ts]{4-5} 129 | export default defineAppConfig({ 130 | ui: { 131 | icons: { 132 | copy: 'i-lucide-copy', 133 | copyCheck: 'i-lucide-copy-check' 134 | } 135 | } 136 | }) 137 | ``` 138 | ```` 139 | :: 140 | 141 | ## Advanced 142 | 143 | ### CodeGroup 144 | 145 | Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers. 146 | 147 | ::code-preview 148 | --- 149 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 150 | --- 151 | :::code-group{.w-full} 152 | ```bash [pnpm] 153 | pnpm add @nuxt/ui 154 | ``` 155 | 156 | ```bash [yarn] 157 | yarn add @nuxt/ui 158 | ``` 159 | 160 | ```bash [npm] 161 | npm install @nuxt/ui 162 | ``` 163 | 164 | ```bash [bun] 165 | bun add @nuxt/ui 166 | ``` 167 | ::: 168 | 169 | #code 170 | ````mdc 171 | :::code-group 172 | 173 | ```bash [pnpm] 174 | pnpm add @nuxt/ui 175 | ``` 176 | 177 | ```bash [yarn] 178 | yarn add @nuxt/ui 179 | ``` 180 | 181 | ```bash [npm] 182 | npm install @nuxt/ui 183 | ``` 184 | 185 | ```bash [bun] 186 | bun add @nuxt/ui 187 | ``` 188 | 189 | :: 190 | ```` 191 | :: 192 | 193 | ::note{to="#pre"} 194 | Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button. 195 | :: 196 | 197 | ### CodeTree 198 | 199 | Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships. 200 | 201 | ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} 202 | :::code-tree{default-value="app/app.config.ts"} 203 | ```ts [nuxt.config.ts] 204 | export default defineNuxtConfig({ 205 | modules: ['@nuxt/ui'], 206 | 207 | css: ['~/assets/css/main.css'] 208 | }) 209 | 210 | ``` 211 | 212 | ```css [app/assets/css/main.css] 213 | @import "tailwindcss"; 214 | @import "@nuxt/ui"; 215 | ``` 216 | 217 | ```ts [app/app.config.ts] 218 | export default defineAppConfig({ 219 | ui: { 220 | colors: { 221 | primary: 'sky', 222 | colors: 'slate' 223 | } 224 | } 225 | }) 226 | ``` 227 | 228 | ```vue [app/app.vue] 229 | 234 | ``` 235 | 236 | ```json [package.json] 237 | { 238 | "name": "nuxt-app", 239 | "private": true, 240 | "type": "module", 241 | "scripts": { 242 | "build": "nuxt build", 243 | "dev": "nuxt dev", 244 | "generate": "nuxt generate", 245 | "preview": "nuxt preview", 246 | "postinstall": "nuxt prepare", 247 | "lint": "eslint .", 248 | "lint:fix": "eslint --fix ." 249 | }, 250 | "dependencies": { 251 | "@iconify-json/lucide": "^1.2.63", 252 | "@nuxt/content": "^3.6.3", 253 | "@nuxt/ui": "^4.0.0", 254 | "nuxt": "^4.1.0" 255 | }, 256 | "devDependencies": { 257 | "@nuxt/eslint": "^1.9.0", 258 | "eslint": "^9.34.0", 259 | "typescript": "^5.9.2", 260 | "vue-tsc": "^3.0.6" 261 | } 262 | } 263 | ``` 264 | 265 | ```json [tsconfig.json] 266 | { 267 | "extends": "./.nuxt/tsconfig.json" 268 | } 269 | ``` 270 | 271 | ````md [README.md] 272 | # Nuxt Minimal Starter 273 | 274 | Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 275 | 276 | ## Setup 277 | 278 | Make sure to install the dependencies: 279 | 280 | ```bash 281 | # npm 282 | npm install 283 | 284 | # pnpm 285 | pnpm install 286 | 287 | # yarn 288 | yarn install 289 | 290 | # bun 291 | bun install 292 | ``` 293 | 294 | ## Development Server 295 | 296 | Start the development server on `http://localhost:3000`: 297 | 298 | ```bash 299 | # npm 300 | npm run dev 301 | 302 | # pnpm 303 | pnpm run dev 304 | 305 | # yarn 306 | yarn dev 307 | 308 | # bun 309 | bun run dev 310 | ``` 311 | 312 | ## Production 313 | 314 | Build the application for production: 315 | 316 | ```bash 317 | # npm 318 | npm run build 319 | 320 | # pnpm 321 | pnpm run build 322 | 323 | # yarn 324 | yarn build 325 | 326 | # bun 327 | bun run build 328 | ``` 329 | 330 | Locally preview production build: 331 | 332 | ```bash 333 | # npm 334 | npm run preview 335 | 336 | # pnpm 337 | pnpm run preview 338 | 339 | # yarn 340 | yarn preview 341 | 342 | # bun 343 | bun run preview 344 | ``` 345 | 346 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 347 | ```` 348 | ::: 349 | :: 350 | 351 | ::note 352 | --- 353 | target: _blank 354 | to: https://ui.nuxt.com/getting-started/typography#codetree 355 | --- 356 | Learn more about the `code-tree` component. 357 | :: 358 | 359 | ### `CodePreview` 360 | 361 | Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results. 362 | Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. 363 | 364 | ::code-preview 365 | --- 366 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 367 | label: Preview 368 | --- 369 | :::code-preview 370 | --- 371 | class: "[&>div]:*:my-0" 372 | --- 373 | `inline code` 374 | 375 | #code 376 | ```mdc 377 | `inline code` 378 | ``` 379 | ::: 380 | 381 | #code 382 | ````mdc 383 | ::code-preview 384 | `inline code` 385 | 386 | #code 387 | ```mdc 388 | `inline code` 389 | ``` 390 | :: 391 | ```` 392 | :: 393 | 394 | ### `CodeCollapse` 395 | 396 | Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability. 397 | 398 | ::code-preview 399 | --- 400 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 401 | --- 402 | :::code-collapse{class="[&>div]:my-0"} 403 | ```css [main.css] 404 | @import "tailwindcss"; 405 | @import "@nuxt/ui"; 406 | 407 | @theme { 408 | --font-sans: 'Public Sans', sans-serif; 409 | 410 | --breakpoint-3xl: 1920px; 411 | 412 | --color-green-50: #EFFDF5; 413 | --color-green-100: #D9FBE8; 414 | --color-green-200: #B3F5D1; 415 | --color-green-300: #75EDAE; 416 | --color-green-400: #00DC82; 417 | --color-green-500: #00C16A; 418 | --color-green-600: #00A155; 419 | --color-green-700: #007F45; 420 | --color-green-800: #016538; 421 | --color-green-900: #0A5331; 422 | --color-green-950: #052E16; 423 | } 424 | ``` 425 | ::: 426 | 427 | #code 428 | ````mdc 429 | ::code-collapse 430 | 431 | ```css [main.css] 432 | @import "tailwindcss"; 433 | @import "@nuxt/ui"; 434 | 435 | @theme { 436 | --font-sans: 'Public Sans', sans-serif; 437 | 438 | --breakpoint-3xl: 1920px; 439 | 440 | --color-green-50: #EFFDF5; 441 | --color-green-100: #D9FBE8; 442 | --color-green-200: #B3F5D1; 443 | --color-green-300: #75EDAE; 444 | --color-green-400: #00DC82; 445 | --color-green-500: #00C16A; 446 | --color-green-600: #00A155; 447 | --color-green-700: #007F45; 448 | --color-green-800: #016538; 449 | --color-green-900: #0A5331; 450 | --color-green-950: #052E16; 451 | } 452 | ``` 453 | 454 | :: 455 | ```` 456 | :: 457 | -------------------------------------------------------------------------------- /content/2.essentials/3.prose-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Prose Components 3 | description: Components to help you structure your content. 4 | navigation: 5 | icon: i-lucide-component 6 | --- 7 | 8 | ### Accordion 9 | 10 | Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way. 11 | 12 | ::code-preview 13 | --- 14 | class: "[&>div]:*:my-0" 15 | --- 16 | :::accordion 17 | ::::accordion-item 18 | --- 19 | icon: i-lucide-circle-help 20 | label: What are the main considerations when upgrading to Nuxt UI v3? 21 | --- 22 | The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. 23 | :::: 24 | 25 | ::::accordion-item 26 | --- 27 | icon: i-lucide-circle-help 28 | label: Is Nuxt UI v3 compatible with standalone Vue projects? 29 | --- 30 | Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. 31 | :::: 32 | ::: 33 | 34 | #code 35 | ```mdc 36 | ::accordion 37 | 38 | :::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"} 39 | The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. 40 | ::: 41 | 42 | :::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} 43 | Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. 44 | ::: 45 | 46 | :: 47 | ``` 48 | :: 49 | 50 | ### Badge 51 | 52 | Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content. 53 | 54 | ::code-preview 55 | --- 56 | label: Preview 57 | --- 58 | :::badge 59 | **v3.0.0-alpha.10** 60 | ::: 61 | 62 | #code 63 | ```mdc 64 | ::badge 65 | **v3.0.0-alpha.10** 66 | :: 67 | ``` 68 | :: 69 | 70 | ### Callout 71 | 72 | Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out. 73 | 74 | Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles. 75 | 76 | ::code-preview 77 | --- 78 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 79 | --- 80 | :::callout 81 | This is a `callout` with full **markdown** support. 82 | ::: 83 | 84 | #code 85 | ```mdc 86 | ::callout 87 | This is a `callout` with full **markdown** support. 88 | :: 89 | ``` 90 | :: 91 | 92 | ::code-preview 93 | :::div{.flex.flex-col.gap-4.w-full} 94 | ::::note{.w-full.my-0} 95 | Here's some additional information for you. 96 | :::: 97 | 98 | ::::tip{.w-full.my-0} 99 | Here's a helpful suggestion. 100 | :::: 101 | 102 | ::::warning{.w-full.my-0} 103 | Be careful with this action as it might have unexpected results. 104 | :::: 105 | 106 | ::::caution{.w-full.my-0} 107 | This action cannot be undone. 108 | :::: 109 | ::: 110 | 111 | #code 112 | ```mdc 113 | ::note 114 | Here's some additional information. 115 | :: 116 | 117 | ::tip 118 | Here's a helpful suggestion. 119 | :: 120 | 121 | ::warning 122 | Be careful with this action as it might have unexpected results. 123 | :: 124 | 125 | ::caution 126 | This action cannot be undone. 127 | :: 128 | ``` 129 | :: 130 | 131 | ### Card 132 | 133 | Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers. 134 | 135 | Customize with `title`, `icon`, and `color` props. Cards can also act as links using `` properties for navigation. 136 | 137 | ::code-preview 138 | --- 139 | class: "[&>div]:*:my-0 [&>div]:*:w-full" 140 | --- 141 | :::card 142 | --- 143 | icon: i-simple-icons-github 144 | target: _blank 145 | title: Dashboard 146 | to: https://github.com/nuxt-ui-templates/dashboard 147 | --- 148 | A dashboard with multi-column layout. 149 | ::: 150 | 151 | #code 152 | ```mdc 153 | ::card 154 | --- 155 | title: Dashboard 156 | icon: i-simple-icons-github 157 | to: https://github.com/nuxt-ui-templates/dashboard 158 | target: _blank 159 | --- 160 | A dashboard with multi-column layout. 161 | :: 162 | ``` 163 | :: 164 | 165 | ### CardGroup 166 | 167 | Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid. 168 | 169 | ::code-preview 170 | :::card-group{.w-full} 171 | ::::card 172 | --- 173 | icon: i-simple-icons-github 174 | target: _blank 175 | title: Dashboard 176 | to: https://github.com/nuxt-ui-templates/dashboard 177 | --- 178 | A dashboard with multi-column layout. 179 | :::: 180 | 181 | ::::card 182 | --- 183 | icon: i-simple-icons-github 184 | target: _blank 185 | title: SaaS 186 | to: https://github.com/nuxt-ui-templates/saas 187 | --- 188 | A template with landing, pricing, docs and blog. 189 | :::: 190 | 191 | ::::card 192 | --- 193 | icon: i-simple-icons-github 194 | target: _blank 195 | title: Docs 196 | to: https://github.com/nuxt-ui-templates/docs 197 | --- 198 | A documentation with `@nuxt/content`. 199 | :::: 200 | 201 | ::::card 202 | --- 203 | icon: i-simple-icons-github 204 | target: _blank 205 | title: Landing 206 | to: https://github.com/nuxt-ui-templates/landing 207 | --- 208 | A landing page you can use as starting point. 209 | :::: 210 | ::: 211 | 212 | #code 213 | ```mdc 214 | ::card-group 215 | 216 | ::card 217 | --- 218 | title: Dashboard 219 | icon: i-simple-icons-github 220 | to: https://github.com/nuxt-ui-templates/dashboard 221 | target: _blank 222 | --- 223 | A dashboard with multi-column layout. 224 | :: 225 | 226 | ::card 227 | --- 228 | title: SaaS 229 | icon: i-simple-icons-github 230 | to: https://github.com/nuxt-ui-templates/saas 231 | target: _blank 232 | --- 233 | A template with landing, pricing, docs and blog. 234 | :: 235 | 236 | ::card 237 | --- 238 | title: Docs 239 | icon: i-simple-icons-github 240 | to: https://github.com/nuxt-ui-templates/docs 241 | target: _blank 242 | --- 243 | A documentation with `@nuxt/content`. 244 | :: 245 | 246 | ::card 247 | --- 248 | title: Landing 249 | icon: i-simple-icons-github 250 | to: https://github.com/nuxt-ui-templates/landing 251 | target: _blank 252 | --- 253 | A landing page you can use as starting point. 254 | :: 255 | 256 | :: 257 | ``` 258 | :: 259 | 260 | ### Collapsible 261 | 262 | Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information. 263 | 264 | ::code-preview 265 | --- 266 | class: "[&>div]:*:w-full" 267 | --- 268 | :::collapsible 269 | | Prop | Default | Type | 270 | | ------- | --------- | -------- | 271 | | `name` | | `string` | 272 | | `size` | `md` | `string` | 273 | | `color` | `neutral` | `string` | 274 | ::: 275 | 276 | #code 277 | ```mdc 278 | ::collapsible 279 | 280 | | Prop | Default | Type | 281 | |---------|-----------|--------------------------| 282 | | `name` | | `string`{lang="ts-type"} | 283 | | `size` | `md` | `string`{lang="ts-type"} | 284 | | `color` | `neutral` | `string`{lang="ts-type"} | 285 | 286 | :: 287 | ``` 288 | :: 289 | 290 | ### Field 291 | 292 | Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options. 293 | 294 | ::code-preview 295 | :::field{.w-full required name="name" type="string"} 296 | The `description` can be set as prop or in the default slot with full **markdown** support. 297 | ::: 298 | 299 | #code 300 | ```mdc 301 | ::field{name="name" type="string" required} 302 | The `description` can be set as prop or in the default slot with full **markdown** support. 303 | :: 304 | ``` 305 | :: 306 | 307 | ### FieldGroup 308 | 309 | Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties. 310 | 311 | ::code-preview 312 | :::field-group 313 | ::::field{name="analytics" type="boolean"} 314 | Default to `false` - Enables analytics for your project (coming soon). 315 | :::: 316 | 317 | ::::field{name="blob" type="boolean"} 318 | Default to `false` - Enables blob storage to store static assets, such as images, videos and more. 319 | :::: 320 | 321 | ::::field{name="cache" type="boolean"} 322 | Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` 323 | :::: 324 | 325 | ::::field{name="database" type="boolean"} 326 | Default to `false` - Enables SQL database to store your application's data. 327 | :::: 328 | ::: 329 | 330 | #code 331 | ```mdc 332 | ::field-group 333 | ::field{name="analytics" type="boolean"} 334 | Default to `false` - Enables analytics for your project (coming soon). 335 | :: 336 | 337 | ::field{name="blob" type="boolean"} 338 | Default to `false` - Enables blob storage to store static assets, such as images, videos and more. 339 | :: 340 | 341 | ::field{name="cache" type="boolean"} 342 | Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` 343 | :: 344 | 345 | ::field{name="database" type="boolean"} 346 | Default to `false` - Enables SQL database to store your application's data. 347 | :: 348 | :: 349 | ``` 350 | :: 351 | 352 | ### Icon 353 | 354 | Use `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation. 355 | 356 | ::code-preview 357 | :icon{name="i-simple-icons-nuxtdotjs"} 358 | 359 | 360 | 361 | #code 362 | ```mdc 363 | :icon{name="i-simple-icons-nuxtdotjs"} 364 | ``` 365 | :: 366 | 367 | ### Kbd 368 | 369 | Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references. 370 | 371 | ::code-preview 372 | --- 373 | class: "[&>div]:*:my-0" 374 | --- 375 | `` `` 376 | 377 | #code 378 | ```mdc 379 | :kbd{value="meta"} :kbd{value="K"} 380 | ``` 381 | :: 382 | 383 | ### Tabs 384 | 385 | Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization. 386 | 387 | ::code-preview 388 | --- 389 | class: "[&>div]:*:my-0" 390 | --- 391 | :::tabs{.w-full} 392 | ::::tabs-item{icon="i-lucide-code" label="Code"} 393 | ```mdc 394 | ::callout 395 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 396 | :: 397 | ``` 398 | :::: 399 | 400 | ::::tabs-item{icon="i-lucide-eye" label="Preview"} 401 | :::::callout 402 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 403 | ::::: 404 | :::: 405 | ::: 406 | 407 | #code 408 | ````mdc 409 | ::tabs 410 | 411 | :::tabs-item{label="Code" icon="i-lucide-code"} 412 | 413 | ```mdc 414 | ::callout 415 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 416 | :: 417 | ``` 418 | 419 | ::: 420 | 421 | :::tabs-item{label="Preview" icon="i-lucide-eye"} 422 | 423 | ::::callout 424 | Lorem velit voluptate ex reprehenderit ullamco et culpa. 425 | :::: 426 | 427 | ::: 428 | 429 | :: 430 | ```` 431 | :: 432 | 433 | ### Steps 434 | 435 | Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials. 436 | 437 | Set the `level` prop to define the heading level to include in the step-by-step guide. 438 | 439 | ::code-preview 440 | --- 441 | class: "[&>div]:*:w-full" 442 | --- 443 | :::steps{level="4"} 444 | #### Add the Nuxt UI module in your `nuxt.config.ts` 445 | 446 | ```ts [nuxt.config.ts] 447 | export default defineNuxtConfig({ 448 | modules: ['@nuxt/ui'] 449 | }) 450 | ``` 451 | 452 | #### Import Tailwind CSS and Nuxt UI in your CSS 453 | 454 | ```css [assets/css/main.css] 455 | @import "tailwindcss"; 456 | @import "@nuxt/ui"; 457 | ``` 458 | ::: 459 | 460 | #code 461 | ````mdc 462 | ::steps{level="4"} 463 | 464 | #### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"} 465 | 466 | ```ts [nuxt.config.ts] 467 | export default defineNuxtConfig({ 468 | modules: ['@nuxt/ui'] 469 | }) 470 | ``` 471 | 472 | #### Import Tailwind CSS and Nuxt UI in your CSS 473 | 474 | ```css [assets/css/main.css] 475 | @import "tailwindcss"; 476 | @import "@nuxt/ui"; 477 | ``` 478 | 479 | :: 480 | ```` 481 | :: 482 | --------------------------------------------------------------------------------