├── .npmrc
├── app
    ├── pages
    │   ├── blog.vue
    │   ├── changelog
    │   │   └── index.vue
    │   ├── docs
    │   │   └── [...slug].vue
    │   ├── blog
    │   │   ├── index.vue
    │   │   └── [slug].vue
    │   ├── signup.vue
    │   ├── login.vue
    │   ├── pricing.vue
    │   └── index.vue
    ├── app.config.ts
    ├── layouts
    │   ├── default.vue
    │   ├── auth.vue
    │   └── docs.vue
    ├── components
    │   ├── content
    │   │   ├── Pictures.vue
    │   │   └── PictureAndText.vue
    │   ├── OgImage
    │   │   └── OgImageSaas.vue
    │   ├── ImagePlaceholder.vue
    │   ├── PromotionalVideo.vue
    │   ├── TemplateMenu.vue
    │   ├── AppHeader.vue
    │   ├── HeroBackground.vue
    │   ├── AppFooter.vue
    │   ├── AppLogo.vue
    │   └── StarsBg.vue
    ├── types
    │   └── index.d.ts
    ├── assets
    │   └── css
    │   │   └── main.css
    ├── error.vue
    └── app.vue
├── content
    ├── 1.docs
    │   ├── 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
    │   │   ├── 3.usage.md
    │   │   └── 1.index.md
    ├── 4.changelog.yml
    ├── 3.blog.yml
    ├── 4.changelog
    │   ├── 3.dark-mode.md
    │   ├── 8.api.md
    │   ├── 9.security.md
    │   ├── 5.mobile.md
    │   ├── 10.fun.md
    │   ├── 4.integrations.md
    │   ├── 6.performance.md
    │   ├── 7.analytics.md
    │   ├── 2.teams.md
    │   └── 1.launch.md
    ├── 2.pricing.yml
    ├── 3.blog
    │   ├── 3.james-webb.md
    │   ├── 4.meditation.md
    │   ├── 2.pyrenees.md
    │   ├── 5.animals.md
    │   ├── 6.cryptocurrencies.md
    │   └── 1.asian-cuisine.md
    └── 0.index.yml
├── public
    └── favicon.ico
├── .env.example
├── eslint.config.mjs
├── pnpm-workspace.yaml
├── .editorconfig
├── renovate.json
├── tsconfig.json
├── .gitignore
├── .github
    └── workflows
    │   └── ci.yml
├── nuxt.config.ts
├── package.json
├── LICENSE
├── README.md
└── content.config.ts


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/app/pages/blog.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtPage />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/content/1.docs/2.essentials/.navigation.yml:
--------------------------------------------------------------------------------
1 | title: Essentials
2 | 


--------------------------------------------------------------------------------
/content/4.changelog.yml:
--------------------------------------------------------------------------------
1 | title: Changelog
2 | navigation.icon: i-lucide-rocket
3 | 


--------------------------------------------------------------------------------
/content/1.docs/1.getting-started/.navigation.yml:
--------------------------------------------------------------------------------
1 | title: Getting Started
2 | icon: false
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt-ui-templates/saas/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # Public URL, used for OG Image when running nuxt generate
2 | NUXT_PUBLIC_SITE_URL=
3 | 


--------------------------------------------------------------------------------
/app/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     colors: {
4 |       primary: 'blue',
5 |       neutral: 'slate'
6 |     }
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <AppHeader />
 4 | 
 5 |     <UMain>
 6 |       <slot />
 7 |     </UMain>
 8 | 
 9 |     <AppFooter />
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/content/3.blog.yml:
--------------------------------------------------------------------------------
1 | title: Blog
2 | description: Discover the latest insights, tutorials, and updates from our team. Stay informed about web development trends, best practices, and innovative solutions.
3 | navigation.icon: i-lucide-newspaper
4 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // https://nuxt.com/docs/guide/concepts/typescript
 3 |   "files": [],
 4 |   "references": [
 5 |     { "path": "./.nuxt/tsconfig.app.json" },
 6 |     { "path": "./.nuxt/tsconfig.server.json" },
 7 |     { "path": "./.nuxt/tsconfig.shared.json" },
 8 |     { "path": "./.nuxt/tsconfig.node.json" }
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.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/components/content/Pictures.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   orientation: 'horizontal' | 'vertical'
 4 | }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div
 9 |     class="flex items-center justify-between"
10 |     :class="orientation === 'vertical' ? 'flex-col space-y-4' : 'flex-row   space-x-4'"
11 |   >
12 |     <slot />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/app/types/index.d.ts:
--------------------------------------------------------------------------------
 1 | import type { ParsedContent } from '@nuxt/content'
 2 | import type { Avatar, Badge, Link } from '#ui/types'
 3 | 
 4 | export interface BlogPost extends ParsedContent {
 5 |   title: string
 6 |   description: string
 7 |   date: string
 8 |   image?: HTMLImageElement
 9 |   badge?: Badge
10 |   authors?: ({
11 |     name: string
12 |     description?: string
13 |     avatar: Avatar
14 |   } & Link)[]
15 | }
16 | 


--------------------------------------------------------------------------------
/app/layouts/auth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-screen flex items-center justify-center px-4">
 3 |     <UButton
 4 |       icon="i-lucide-chevron-left"
 5 |       to="/"
 6 |       size="xl"
 7 |       color="neutral"
 8 |       variant="subtle"
 9 |       class="absolute left-8 top-8 rounded-full z-10"
10 |     />
11 | 
12 |     <UPageCard
13 |       variant="subtle"
14 |       class="max-w-sm w-full"
15 |     >
16 |       <slot />
17 |     </UPageCard>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/app/components/content/PictureAndText.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { UCard } from '#components'
 3 | 
 4 | defineProps<{
 5 |   reverse?: boolean
 6 |   card?: boolean
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <component :is="card ? UCard : 'div'">
12 |     <div class="grid grid-cols-3 items-center w-full gap-x-8">
13 |       <div :class="{ 'order-2': reverse }">
14 |         <slot name="image" />
15 |       </div>
16 |       <div class="col-span-2">
17 |         <slot />
18 |       </div>
19 |     </div>
20 |   </component>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/app/components/OgImage/OgImageSaas.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineOptions({
 3 |   inheritAttrs: false
 4 | })
 5 | 
 6 | defineProps({
 7 |   title: {
 8 |     type: String,
 9 |     required: true
10 |   },
11 |   description: {
12 |     type: String,
13 |     required: true
14 |   }
15 | })
16 | </script>
17 | 
18 | <template>
19 |   <div class="w-full h-full flex flex-col justify-center text-center bg-slate-900 p-8">
20 |     <div class="relative">
21 |       <h1 class="text-8xl mb-4 text-white">
22 |         {{ title }}
23 |       </h1>
24 |       <p class="text-5xl text-gray-200 leading-tight">
25 |         {{ description }}
26 |       </p>
27 |     </div>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/.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/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @import "@nuxt/ui";
 3 | 
 4 | @source "../../../content/**/*";
 5 | 
 6 | @theme static {
 7 |   --font-sans: 'Public Sans', sans-serif;
 8 | 
 9 |   --color-green-50: #EFFDF5;
10 |   --color-green-100: #D9FBE8;
11 |   --color-green-200: #B3F5D1;
12 |   --color-green-300: #75EDAE;
13 |   --color-green-400: #00DC82;
14 |   --color-green-500: #00C16A;
15 |   --color-green-600: #00A155;
16 |   --color-green-700: #007F45;
17 |   --color-green-800: #016538;
18 |   --color-green-900: #0A5331;
19 |   --color-green-950: #052E16;
20 | }
21 | 
22 | .dark {
23 |   --ui-bg: var(--ui-color-neutral-950);
24 |   --ui-bg-muted: var(--ui-color-neutral-900);
25 |   --ui-bg-elevated: var(--ui-color-neutral-900);
26 |   --ui-bg-accented: var(--ui-color-neutral-800);
27 | }
28 | 


--------------------------------------------------------------------------------
/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 |     '@vueuse/nuxt',
 9 |     'nuxt-og-image'
10 |   ],
11 | 
12 |   devtools: {
13 |     enabled: true
14 |   },
15 | 
16 |   css: ['~/assets/css/main.css'],
17 | 
18 |   routeRules: {
19 |     '/docs': { redirect: '/docs/getting-started', prerender: false }
20 |   },
21 | 
22 |   compatibilityDate: '2024-07-11',
23 | 
24 |   nitro: {
25 |     prerender: {
26 |       routes: [
27 |         '/'
28 |       ],
29 |       crawlLinks: true
30 |     }
31 |   },
32 | 
33 |   eslint: {
34 |     config: {
35 |       stylistic: {
36 |         commaDangle: 'never',
37 |         braceStyle: '1tbs'
38 |       }
39 |     }
40 |   }
41 | })
42 | 


--------------------------------------------------------------------------------
/app/layouts/docs.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ContentNavigationItem } from '@nuxt/content'
 3 | 
 4 | const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     <AppHeader />
10 | 
11 |     <UMain>
12 |       <UContainer>
13 |         <UPage>
14 |           <template #left>
15 |             <UPageAside>
16 |               <template #top>
17 |                 <UContentSearchButton :collapsed="false" />
18 |               </template>
19 | 
20 |               <UContentNavigation
21 |                 :navigation="navigation"
22 |                 highlight
23 |               />
24 |             </UPageAside>
25 |           </template>
26 | 
27 |           <slot />
28 |         </UPage>
29 |       </UContainer>
30 |     </UMain>
31 | 
32 |     <AppFooter />
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/content/1.docs/1.getting-started/2.installation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Installation
 3 | description: Get started with Nuxt UI SaaS 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/saas
14 | ```
15 | 
16 | or create a new repository from GitHub:
17 | 
18 | 1. Open <https://github.com/nuxt-ui-templates/saas>
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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-ui-template-saas",
 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 |     "@nuxt/content": "^3.8.2",
17 |     "@nuxt/image": "^2.0.0",
18 |     "@nuxt/ui": "^4.2.1",
19 |     "@standard-schema/spec": "^1.0.0",
20 |     "@vueuse/nuxt": "^13.9.0",
21 |     "better-sqlite3": "^12.4.6",
22 |     "nuxt": "^4.2.2",
23 |     "nuxt-og-image": "^5.1.12",
24 |     "zod": "^4.1.13"
25 |   },
26 |   "devDependencies": {
27 |     "@nuxt/eslint": "^1.10.0",
28 |     "eslint": "^9.39.1",
29 |     "typescript": "^5.9.3",
30 |     "vue-tsc": "^3.1.5"
31 |   },
32 |   "packageManager": "pnpm@10.23.0"
33 | }
34 | 


--------------------------------------------------------------------------------
/app/components/ImagePlaceholder.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UPageCard
 3 |     variant="subtle"
 4 |   >
 5 |     <div class="relative overflow-hidden rounded-sm border border-dashed border-accented opacity-75 px-4 flex items-center justify-center aspect-video">
 6 |       <svg
 7 |         class="absolute inset-0 h-full w-full stroke-inverted/10"
 8 |         fill="none"
 9 |       >
10 |         <defs>
11 |           <pattern
12 |             id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
13 |             x="0"
14 |             y="0"
15 |             width="10"
16 |             height="10"
17 |             patternUnits="userSpaceOnUse"
18 |           >
19 |             <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
20 |           </pattern>
21 |         </defs>
22 |         <rect
23 |           stroke="none"
24 |           fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
25 |           width="100%"
26 |           height="100%"
27 |         />
28 |       </svg>
29 | 
30 |       <slot />
31 |     </div>
32 |   </UPageCard>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/content/1.docs/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 | 


--------------------------------------------------------------------------------
/app/components/PromotionalVideo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="relative">
 3 |     <UPageCard
 4 |       variant="subtle"
 5 |       class="rounded-2xl"
 6 |     >
 7 |       <video
 8 |         class="rounded-xl"
 9 |         data-v-baf90ddd=""
10 |         preload="none"
11 |         poster="https://res.cloudinary.com/nuxt/video/upload/so_3.3/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.jpg"
12 |         :controls="true"
13 |       ><source
14 |         data-v-baf90ddd=""
15 |         src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.webm"
16 |         type="video/webm"
17 |       ><source
18 |         data-v-baf90ddd=""
19 |         src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.mp4"
20 |         type="video/mp4"
21 |       ><source
22 |         data-v-baf90ddd=""
23 |         src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.ogg"
24 |         type="video/ogg"
25 |       >
26 |       </video>
27 |     </UPageCard>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Nuxt UI Templates
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/app/pages/changelog/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | 
 4 | const { data: page } = await useAsyncData('changelog', () => queryCollection('changelog').first())
 5 | const { data: versions } = await useAsyncData(route.path, () => queryCollection('versions').order('date', 'DESC').all())
 6 | 
 7 | const title = page.value?.seo?.title || page.value?.title
 8 | const description = page.value?.seo?.description || page.value?.description
 9 | 
10 | useSeoMeta({
11 |   title,
12 |   ogTitle: title,
13 |   description,
14 |   ogDescription: description
15 | })
16 | 
17 | defineOgImageComponent('Saas')
18 | </script>
19 | 
20 | <template>
21 |   <UContainer>
22 |     <UPageHeader
23 |       v-bind="page"
24 |       class="py-[50px]"
25 |     />
26 | 
27 |     <UPageBody>
28 |       <UChangelogVersions>
29 |         <UChangelogVersion
30 |           v-for="(version, index) in versions"
31 |           :key="index"
32 |           v-bind="version"
33 |         >
34 |           <template #body>
35 |             <ContentRenderer :value="version.body" />
36 |           </template>
37 |         </UChangelogVersion>
38 |       </UChangelogVersions>
39 |     </UPageBody>
40 |   </UContainer>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/content/4.changelog/3.dark-mode.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Dark Mode 🌙"
 3 | description: "Your eyes will thank you! Switch between light and dark themes with a single click. Fully integrated with Nuxt UI."
 4 | date: "2024-06-15"
 5 | image: https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🌙 Give your eyes a break with our new Dark Mode! After many requests, we're thrilled to deliver a sleek, modern look that's easy on the eyes—day or night.
 9 | 
10 | Switching themes is now effortless, and every component has been carefully tuned for contrast and accessibility. Whether you're burning the midnight oil or just prefer a darker palette, this update is for you. 🌓
11 | 
12 | **Improvements:**
13 | - 🌗 One-click theme toggle in the header
14 | - 🖥️ Automatic adaptation to system preferences
15 | - 🧩 Fully integrated with Nuxt UI components
16 | - ♿ Optimized for accessibility and contrast
17 | - 💾 Persistent theme preference across devices
18 | - ✨ Subtle animations for a polished feel
19 | 
20 | **Behind the scenes:** 🎨
21 | We refactored our color system and tested across dozens of devices to ensure a consistent experience. Expect more theme customization options soon!
22 | 
23 | Let us know how you like the new look and if you spot any areas for improvement! 💬
24 | 


--------------------------------------------------------------------------------
/content/4.changelog/8.api.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Public API Now Available 🛠️"
 3 | description: "Build your own integrations and automate workflows with our brand new public API."
 4 | date: "2024-10-25"
 5 | image: https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🛠️ Build your own integrations and automate workflows with our brand new public API! This is a huge step for our developer community, and we can't wait to see what you create.
 9 | 
10 | The API gives you secure, programmatic access to all major resources in your workspace. From automating routine tasks to building custom dashboards, the possibilities are endless. 🤖
11 | 
12 | **Highlights:**
13 | - 🌐 RESTful endpoints for all major resources
14 | - 🔑 Secure API key authentication
15 | - 📚 Comprehensive documentation and code samples
16 | - 📡 Webhook support for real-time updates
17 | - 🚦 Rate limiting and monitoring for stability
18 | - 🗣️ Community forum for sharing projects and getting help
19 | 
20 | **Behind the scenes:** 👨‍💻
21 | We worked closely with early adopters to ensure the API is robust and easy to use. Our docs are open source—contributions and feedback are welcome!
22 | 
23 | We can't wait to see what you build—share your projects with us and help shape the next version of our API! 🚀
24 | 


--------------------------------------------------------------------------------
/content/4.changelog/9.security.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Security Enhancements 🔒"
 3 | description: "Your data is safer than ever. We've rolled out new security features and compliance updates."
 4 | date: "2024-11-12"
 5 | image: https://images.unsplash.com/photo-1510511459019-5dda7724fd87?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🔒 Your data is safer than ever. This update brings a suite of new security features and compliance improvements, reflecting our ongoing commitment to protecting your business.
 9 | 
10 | We've worked with security experts and listened to customer feedback to deliver the most requested enhancements. Security is never done, but this release is a big leap forward. 🛡️
11 | 
12 | **Enhancements:**
13 | - 🔑 Two-factor authentication (2FA) for all accounts
14 | - 🏢 SSO support for enterprise customers
15 | - 📜 GDPR and SOC 2 compliance updates
16 | - 📝 Improved audit logs and access controls
17 | - ⏳ Session timeout and device management
18 | - 🔐 Encrypted data at rest and in transit
19 | 
20 | **Behind the scenes:** 🕵️‍♂️
21 | We conducted a full security audit and implemented automated vulnerability scanning. Our team is now preparing for additional certifications and regular penetration testing.
22 | 
23 | Thank you for trusting us with your business—security will always be our top priority! 🙏
24 | 


--------------------------------------------------------------------------------
/content/4.changelog/5.mobile.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Mobile App Beta 📱"
 3 | description: "Access your dashboard on the go! Our mobile app beta is now open for all users. Available on iOS and Android."
 4 | date: "2024-08-30"
 5 | image: https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 📱 Take your SaaS dashboard anywhere! Our mobile app beta is now available for iOS and Android, bringing your workspace to your pocket. Stay productive and connected, wherever you are.
 9 | 
10 | We designed the app from the ground up for speed and usability on small screens. Whether you're checking reports on the train or getting notifications on the go, the mobile app keeps you in the loop. 🚆
11 | 
12 | **Features:**
13 | - 📊 Access dashboards and reports on the go
14 | - 🔔 Push notifications for important updates
15 | - 📴 Offline support for uninterrupted productivity
16 | - 🤏 Optimized for touch and small screens
17 | - 🛡️ Secure biometric login (Face ID & Touch ID)
18 | - ⚡ Quick actions for common tasks
19 | 
20 | **Behind the scenes:** 🧑‍💻
21 | We built the app using the latest cross-platform tech, ensuring a native feel on both iOS and Android. Your feedback during beta will help us polish and prioritize new features.
22 | 
23 | We'd love your feedback as we prepare for the full launch! 🚀
24 | 


--------------------------------------------------------------------------------
/content/4.changelog/10.fun.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Clippy Integration (Beta) 🐤"
 3 | description: "Meet your new productivity assistant! For April Fools' Day, we're introducing Clippy, your friendly (and slightly mischievous) helper. He's here to make your day a little brighter—and maybe a little more chaotic."
 4 | date: "2025-04-01"
 5 | image: https://images.unsplash.com/photo-1503676382389-4809596d5290?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🎉 Meet your new productivity assistant! For April Fools' Day, we're introducing Clippy, your friendly (and slightly mischievous) helper. He's here to make your day a little brighter—and maybe a little more chaotic. 😜
 9 | 
10 | Clippy pops up with tips, jokes, and the occasional dance across your dashboard. Don't worry, you can always dismiss him with a click (or just enjoy the nostalgia). 🐤
11 | 
12 | **Features:**
13 | - 💡 Pops up with helpful (and sometimes unhelpful) tips
14 | - 🕺 Animates across your dashboard with classic Clippy moves
15 | - 😂 Tells a random joke on demand
16 | - ❌ Can be dismissed with a single click
17 | - 🥚 Easter eggs for the curious
18 | 
19 | **Behind the scenes:** 🎬
20 | Our team had a blast bringing Clippy to life for a day. No productivity assistants were harmed in the making of this feature.
21 | 
22 | Don't worry, Clippy will only stick around for a day. Or will he? 😉
23 | 


--------------------------------------------------------------------------------
/content/4.changelog/4.integrations.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Integrations Galore"
 3 | description: "Connect your favorite tools! We now support integrations with Slack, GitHub, and Zapier. Automate your workflow with ease."
 4 | date: "2024-07-20"
 5 | image: https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🔌 Connect your SaaS workspace to the tools you love! Our new integrations make it easy to automate and extend your workflow, saving you time and reducing manual work.
 9 | 
10 | This release is just the beginning—integrations are now a first-class part of our platform. We've started with the most requested tools and will be adding more based on your feedback. 🗂️
11 | 
12 | **New integrations:**
13 | - 💬 **Slack:** Get real-time notifications and updates in your channels
14 | - 🐙 **GitHub:** Link commits and pull requests to your projects for better traceability
15 | - 🤖 **Zapier:** Automate repetitive tasks with 5,000+ apps
16 | - 📅 **Google Calendar:** Sync important dates and deadlines
17 | 
18 | **Behind the scenes:** 🔧
19 | We built a new integrations framework to make adding and managing connections seamless. Our API is now more robust, and we're working on an integrations marketplace for even more options.
20 | 
21 | More integrations are on the way—tell us which ones you want next! 📨
22 | 


--------------------------------------------------------------------------------
/content/4.changelog/6.performance.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Performance Boost ⚡️"
 3 | description: "Our SaaS just got a whole lot faster! Enjoy snappier load times and smoother navigation across the app."
 4 | date: "2024-09-15"
 5 | image: https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | ⚡ Our SaaS just got a whole lot faster! This update is all about speed, responsiveness, and a smoother experience for everyone. We know how important performance is, so we've made it a top priority for this release.
 9 | 
10 | From optimizing our backend infrastructure to fine-tuning the frontend, every part of the app has been reviewed and improved. You'll notice snappier load times, quicker navigation, and a more fluid feel throughout the platform. 🚀
11 | 
12 | **Improvements:**
13 | - 🚄 2x faster dashboard load times
14 | - ⏱️ Reduced API response latency by 40%
15 | - 🖼️ Optimized image delivery and caching for all devices
16 | - 🌀 Smoother transitions and navigation between pages
17 | - 🧠 Lower memory usage on mobile and desktop
18 | 
19 | **Behind the scenes:** 🛠️
20 | We introduced smarter caching, lazy loading, and database indexing. Our team also set up new monitoring tools to catch slowdowns before you do.
21 | 
22 | Let us know if you notice the difference—and if there's anywhere else you'd like to see us speed things up! 💬
23 | 


--------------------------------------------------------------------------------
/content/4.changelog/7.analytics.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Advanced Analytics 📊"
 3 | description: "Gain deeper insights into your business with our new analytics dashboard. Track key metrics and visualize your growth."
 4 | date: "2024-10-05"
 5 | image: https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 📊 Gain deeper insights into your business with our new analytics dashboard! This release brings powerful tools to help you track, measure, and grow—all in one place.
 9 | 
10 | We've reimagined analytics from the ground up, making it easier to visualize trends, monitor KPIs, and share reports with your team. Whether you're a data pro or just getting started, you'll find everything you need to make smarter decisions. 🧠
11 | 
12 | **New features:**
13 | - 📈 Customizable dashboards and reports
14 | - ⏱️ Real-time user and revenue tracking
15 | - 📤 Export data to CSV or Google Sheets
16 | - 📊 Visualize trends with interactive charts and graphs
17 | - 📧 Scheduled email reports for key metrics
18 | - 🔍 Drill-down filters for granular analysis
19 | 
20 | **Behind the scenes:** 🛠️
21 | We built a new analytics engine using scalable cloud infrastructure, ensuring fast queries and reliable data. Expect more integrations and advanced visualizations soon!
22 | 
23 | We're excited to see what insights you discover—let us know what you build with it! 🚀
24 | 


--------------------------------------------------------------------------------
/content/4.changelog/2.teams.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Teams & Collaboration"
 3 | description: "Introducing Teams! Invite colleagues, assign roles, and collaborate in real-time. Perfect for startups and growing businesses."
 4 | date: "2024-05-10"
 5 | image: https://images.unsplash.com/photo-1518609878373-06d740f60d8b?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🤝 Collaboration just got easier! With Teams, you can now work together more efficiently and securely. This update is all about empowering organizations to scale and manage their members with confidence.
 9 | 
10 | We listened to your feedback and built a flexible system for inviting colleagues, assigning roles, and tracking activity. Whether you're onboarding new hires or collaborating across departments, Teams has you covered. 👥
11 | 
12 | **What's new:**
13 | - ✉️ Invite team members via email or shareable link
14 | - 🛡️ Assign roles (Admin, Member, Viewer) for granular access control
15 | - 🔔 Real-time activity tracking and notifications
16 | - 📊 Team-based dashboards and analytics for better insights
17 | - 🔄 Easy switching between multiple teams and organizations
18 | 
19 | **Behind the scenes:** 🏗️
20 | We re-architected our user management system to support organizations of any size. This paves the way for future features like SSO, advanced permissions, and audit logs.
21 | 
22 | Perfect for startups and growing businesses. Try it out and streamline your workflow! 🚀
23 | 


--------------------------------------------------------------------------------
/content/1.docs/1.getting-started/1.index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Introduction
 3 | description: Welcome to Nuxt UI SaaS template.
 4 | navigation:
 5 |   icon: i-lucide-house
 6 | ---
 7 | 
 8 | This template is a ready-to-use SaaS template made with [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
 9 | 
10 | This template includes a customizable landing page, a pricing page, a documentation, a blog and authentication pages (login, register).
11 | 
12 | ## Key Features
13 | 
14 | This template includes a range of features designed to streamline documentation management:
15 | 
16 | - **Powered by** [**Nuxt**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
17 | - **Built with** [**Nuxt UI**](https://ui.nuxt.com): Integrates a comprehensive suite of UI components.
18 | - [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
19 | - **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
20 | - **Full-Text Search**: Includes built-in search functionality for content discovery.
21 | - **Optimized Typography**: Features refined typography for enhanced readability.
22 | - **Dark Mode**: Offers dark mode support for user preference.
23 | - **Extensive Functionality**: Explore the template to fully appreciate its capabilities.
24 | 


--------------------------------------------------------------------------------
/app/components/TemplateMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UDropdownMenu
 3 |     v-slot="{ open }"
 4 |     :modal="false"
 5 |     :items="[{
 6 |       label: 'Starter',
 7 |       to: 'https://starter-template.nuxt.dev/'
 8 |     }, {
 9 |       label: 'Landing',
10 |       to: 'https://landing-template.nuxt.dev/'
11 |     }, {
12 |       label: 'Docs',
13 |       to: 'https://docs-template.nuxt.dev/'
14 |     }, {
15 |       label: 'SaaS',
16 |       to: 'https://saas-template.nuxt.dev/',
17 |       color: 'primary',
18 |       checked: true,
19 |       type: 'checkbox'
20 |     }, {
21 |       label: 'Dashboard',
22 |       to: 'https://dashboard-template.nuxt.dev/'
23 |     }, {
24 |       label: 'Chat',
25 |       to: 'https://chat-template.nuxt.dev/'
26 |     }, {
27 |       label: 'Portfolio',
28 |       to: 'https://portfolio-template.nuxt.dev/'
29 |     }, {
30 |       label: 'Changelog',
31 |       to: 'https://changelog-template.nuxt.dev/'
32 |     }]"
33 |     :content="{ align: 'start' }"
34 |     :ui="{ content: 'min-w-fit' }"
35 |     size="xs"
36 |   >
37 |     <UButton
38 |       label="SaaS"
39 |       variant="subtle"
40 |       trailing-icon="i-lucide-chevron-down"
41 |       size="xs"
42 |       class="-mb-[6px] font-semibold rounded-full truncate"
43 |       :class="[open && 'bg-primary/15']"
44 |       :ui="{
45 |         trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
46 |       }"
47 |     />
48 |   </UDropdownMenu>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/app/pages/docs/[...slug].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   layout: 'docs'
 4 | })
 5 | 
 6 | const route = useRoute()
 7 | 
 8 | const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
 9 | if (!page.value) {
10 |   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
11 | }
12 | 
13 | const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
14 |   return queryCollectionItemSurroundings('docs', route.path, {
15 |     fields: ['description']
16 |   })
17 | })
18 | 
19 | const title = page.value.seo?.title || page.value.title
20 | const description = page.value.seo?.description || page.value.description
21 | 
22 | useSeoMeta({
23 |   title,
24 |   ogTitle: title,
25 |   description,
26 |   ogDescription: description
27 | })
28 | 
29 | defineOgImageComponent('Saas')
30 | </script>
31 | 
32 | <template>
33 |   <UPage v-if="page">
34 |     <UPageHeader
35 |       :title="page.title"
36 |       :description="page.description"
37 |     />
38 | 
39 |     <UPageBody>
40 |       <ContentRenderer
41 |         v-if="page.body"
42 |         :value="page"
43 |       />
44 | 
45 |       <USeparator v-if="surround?.length" />
46 | 
47 |       <UContentSurround :surround="surround" />
48 |     </UPageBody>
49 | 
50 |     <template
51 |       v-if="page?.body?.toc?.links?.length"
52 |       #right
53 |     >
54 |       <UContentToc :links="page.body.toc.links" />
55 |     </template>
56 |   </UPage>
57 | </template>
58 | 


--------------------------------------------------------------------------------
/app/pages/blog/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | 
 4 | const { data: page } = await useAsyncData('blog', () => queryCollection('blog').first())
 5 | const { data: posts } = await useAsyncData(route.path, () => queryCollection('posts').all())
 6 | 
 7 | const title = page.value?.seo?.title || page.value?.title
 8 | const description = page.value?.seo?.description || page.value?.description
 9 | 
10 | useSeoMeta({
11 |   title,
12 |   ogTitle: title,
13 |   description,
14 |   ogDescription: description
15 | })
16 | 
17 | defineOgImageComponent('Saas')
18 | </script>
19 | 
20 | <template>
21 |   <UContainer>
22 |     <UPageHeader
23 |       v-bind="page"
24 |       class="py-[50px]"
25 |     />
26 | 
27 |     <UPageBody>
28 |       <UBlogPosts>
29 |         <UBlogPost
30 |           v-for="(post, index) in posts"
31 |           :key="index"
32 |           :to="post.path"
33 |           :title="post.title"
34 |           :description="post.description"
35 |           :image="post.image"
36 |           :date="new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })"
37 |           :authors="post.authors"
38 |           :badge="post.badge"
39 |           :orientation="index === 0 ? 'horizontal' : 'vertical'"
40 |           :class="[index === 0 && 'col-span-full']"
41 |           variant="naked"
42 |           :ui="{
43 |             description: 'line-clamp-2'
44 |           }"
45 |         />
46 |       </UBlogPosts>
47 |     </UPageBody>
48 |   </UContainer>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/content/4.changelog/1.launch.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "SaaS Launch 🚀"
 3 | description: "We're excited to announce the public launch of our SaaS platform! This release lays the foundation for a modern, scalable SaaS experience. Start building your next big thing today."
 4 | date: "2024-04-01"
 5 | image: https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80
 6 | ---
 7 | 
 8 | 🚀 We're excited to announce the public launch of our SaaS platform! This milestone is the result of months of design, development, and feedback from our early users. Our goal: make it easier than ever to launch, manage, and grow your business online.
 9 | 
10 | From the first line of code, we focused on speed, reliability, and a delightful user experience. Whether you're a solo founder or a growing team, our platform is built to scale with you. 💡
11 | 
12 | **Highlights:**
13 | - ⚡ Fast, responsive dashboard UI for effortless navigation
14 | - 🔐 Seamless onboarding and secure authentication
15 | - 💳 Built-in billing and subscription management with Stripe integration
16 | - 🎨 Modern design system powered by Nuxt UI
17 | - 📱 Mobile-friendly and accessible from day one
18 | - 📚 Helpful documentation and in-app tips
19 | 
20 | **Behind the scenes:** 🛠️
21 | We've invested in a robust infrastructure to ensure uptime and performance. Our team has also set up automated testing and continuous deployment, so you'll always have the latest features and fixes.
22 | 
23 | We're just getting started—your feedback will help shape the future of our platform. Let us know what you think and what you'd like to see next! ✨
24 | 


--------------------------------------------------------------------------------
/app/error.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { NuxtError } from '#app'
 3 | 
 4 | defineProps({
 5 |   error: {
 6 |     type: Object as PropType<NuxtError>,
 7 |     required: true
 8 |   }
 9 | })
10 | 
11 | useHead({
12 |   htmlAttrs: {
13 |     lang: 'en'
14 |   }
15 | })
16 | 
17 | useSeoMeta({
18 |   title: 'Page not found',
19 |   description: 'We are sorry but this page could not be found.'
20 | })
21 | 
22 | const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
23 |   transform: data => data.find(item => item.path === '/docs')?.children || []
24 | })
25 | const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
26 |   server: false
27 | })
28 | 
29 | const links = [{
30 |   label: 'Docs',
31 |   icon: 'i-lucide-book',
32 |   to: '/docs/getting-started'
33 | }, {
34 |   label: 'Pricing',
35 |   icon: 'i-lucide-credit-card',
36 |   to: '/pricing'
37 | }, {
38 |   label: 'Blog',
39 |   icon: 'i-lucide-pencil',
40 |   to: '/blog'
41 | }]
42 | </script>
43 | 
44 | <template>
45 |   <div>
46 |     <AppHeader />
47 | 
48 |     <UMain>
49 |       <UContainer>
50 |         <UPage>
51 |           <UError :error="error" />
52 |         </UPage>
53 |       </UContainer>
54 |     </UMain>
55 | 
56 |     <AppFooter />
57 | 
58 |     <ClientOnly>
59 |       <LazyUContentSearch
60 |         :files="files"
61 |         shortcut="meta_k"
62 |         :navigation="navigation"
63 |         :links="links"
64 |         :fuse="{ resultLimit: 42 }"
65 |       />
66 |     </ClientOnly>
67 | 
68 |     <UToaster />
69 |   </div>
70 | </template>
71 | 


--------------------------------------------------------------------------------
/app/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | 
 4 | const items = computed(() => [{
 5 |   label: 'Docs',
 6 |   to: '/docs',
 7 |   active: route.path.startsWith('/docs')
 8 | }, {
 9 |   label: 'Pricing',
10 |   to: '/pricing'
11 | }, {
12 |   label: 'Blog',
13 |   to: '/blog'
14 | }, {
15 |   label: 'Changelog',
16 |   to: '/changelog'
17 | }])
18 | </script>
19 | 
20 | <template>
21 |   <UHeader>
22 |     <template #left>
23 |       <NuxtLink to="/">
24 |         <AppLogo class="w-auto h-6 shrink-0" />
25 |       </NuxtLink>
26 |       <TemplateMenu />
27 |     </template>
28 | 
29 |     <UNavigationMenu
30 |       :items="items"
31 |       variant="link"
32 |     />
33 | 
34 |     <template #right>
35 |       <UColorModeButton />
36 | 
37 |       <UButton
38 |         icon="i-lucide-log-in"
39 |         color="neutral"
40 |         variant="ghost"
41 |         to="/login"
42 |         class="lg:hidden"
43 |       />
44 | 
45 |       <UButton
46 |         label="Sign in"
47 |         color="neutral"
48 |         variant="outline"
49 |         to="/login"
50 |         class="hidden lg:inline-flex"
51 |       />
52 | 
53 |       <UButton
54 |         label="Sign up"
55 |         color="neutral"
56 |         trailing-icon="i-lucide-arrow-right"
57 |         class="hidden lg:inline-flex"
58 |         to="/signup"
59 |       />
60 |     </template>
61 | 
62 |     <template #body>
63 |       <UNavigationMenu
64 |         :items="items"
65 |         orientation="vertical"
66 |         class="-mx-2.5"
67 |       />
68 | 
69 |       <USeparator class="my-6" />
70 | 
71 |       <UButton
72 |         label="Sign in"
73 |         color="neutral"
74 |         variant="subtle"
75 |         to="/login"
76 |         block
77 |         class="mb-3"
78 |       />
79 |       <UButton
80 |         label="Sign up"
81 |         color="neutral"
82 |         to="/signup"
83 |         block
84 |       />
85 |     </template>
86 |   </UHeader>
87 | </template>
88 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const colorMode = useColorMode()
 3 | 
 4 | const color = computed(() => colorMode.value === 'dark' ? '#020618' : 'white')
 5 | 
 6 | useHead({
 7 |   meta: [
 8 |     { charset: 'utf-8' },
 9 |     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |     { key: 'theme-color', name: 'theme-color', content: color }
11 |   ],
12 |   link: [
13 |     { rel: 'icon', href: '/favicon.ico' }
14 |   ],
15 |   htmlAttrs: {
16 |     lang: 'en'
17 |   }
18 | })
19 | 
20 | useSeoMeta({
21 |   titleTemplate: '%s - Nuxt SaaS template',
22 |   ogImage: 'https://ui.nuxt.com/assets/templates/nuxt/saas-light.png',
23 |   twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/saas-light.png',
24 |   twitterCard: 'summary_large_image'
25 | })
26 | 
27 | const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
28 |   transform: data => data.find(item => item.path === '/docs')?.children || []
29 | })
30 | const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
31 |   server: false
32 | })
33 | 
34 | const links = [{
35 |   label: 'Docs',
36 |   icon: 'i-lucide-book',
37 |   to: '/docs/getting-started'
38 | }, {
39 |   label: 'Pricing',
40 |   icon: 'i-lucide-credit-card',
41 |   to: '/pricing'
42 | }, {
43 |   label: 'Blog',
44 |   icon: 'i-lucide-pencil',
45 |   to: '/blog'
46 | }, {
47 |   label: 'Changelog',
48 |   icon: 'i-lucide-history',
49 |   to: '/changelog'
50 | }]
51 | 
52 | provide('navigation', navigation)
53 | </script>
54 | 
55 | <template>
56 |   <UApp>
57 |     <NuxtLoadingIndicator />
58 | 
59 |     <NuxtLayout>
60 |       <NuxtPage />
61 |     </NuxtLayout>
62 | 
63 |     <ClientOnly>
64 |       <LazyUContentSearch
65 |         :files="files"
66 |         shortcut="meta_k"
67 |         :navigation="navigation"
68 |         :links="links"
69 |         :fuse="{ resultLimit: 42 }"
70 |       />
71 |     </ClientOnly>
72 |   </UApp>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/content/1.docs/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 `<NuxtImg>` 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 | 


--------------------------------------------------------------------------------
/app/pages/signup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import * as z from 'zod'
 3 | import type { FormSubmitEvent } from '@nuxt/ui'
 4 | 
 5 | definePageMeta({
 6 |   layout: 'auth'
 7 | })
 8 | 
 9 | useSeoMeta({
10 |   title: 'Sign up',
11 |   description: 'Create an account to get started'
12 | })
13 | 
14 | const toast = useToast()
15 | 
16 | const fields = [{
17 |   name: 'name',
18 |   type: 'text' as const,
19 |   label: 'Name',
20 |   placeholder: 'Enter your name'
21 | }, {
22 |   name: 'email',
23 |   type: 'text' as const,
24 |   label: 'Email',
25 |   placeholder: 'Enter your email'
26 | }, {
27 |   name: 'password',
28 |   label: 'Password',
29 |   type: 'password' as const,
30 |   placeholder: 'Enter your password'
31 | }]
32 | 
33 | const providers = [{
34 |   label: 'Google',
35 |   icon: 'i-simple-icons-google',
36 |   onClick: () => {
37 |     toast.add({ title: 'Google', description: 'Login with Google' })
38 |   }
39 | }, {
40 |   label: 'GitHub',
41 |   icon: 'i-simple-icons-github',
42 |   onClick: () => {
43 |     toast.add({ title: 'GitHub', description: 'Login with GitHub' })
44 |   }
45 | }]
46 | 
47 | const schema = z.object({
48 |   name: z.string().min(1, 'Name is required'),
49 |   email: z.email('Invalid email'),
50 |   password: z.string().min(8, 'Must be at least 8 characters')
51 | })
52 | 
53 | type Schema = z.output<typeof schema>
54 | 
55 | function onSubmit(payload: FormSubmitEvent<Schema>) {
56 |   console.log('Submitted', payload)
57 | }
58 | </script>
59 | 
60 | <template>
61 |   <UAuthForm
62 |     :fields="fields"
63 |     :schema="schema"
64 |     :providers="providers"
65 |     title="Create an account"
66 |     :submit="{ label: 'Create account' }"
67 |     @submit="onSubmit"
68 |   >
69 |     <template #description>
70 |       Already have an account? <ULink
71 |         to="/login"
72 |         class="text-primary font-medium"
73 |       >Login</ULink>.
74 |     </template>
75 | 
76 |     <template #footer>
77 |       By signing up, you agree to our <ULink
78 |         to="/"
79 |         class="text-primary font-medium"
80 |       >Terms of Service</ULink>.
81 |     </template>
82 |   </UAuthForm>
83 | </template>
84 | 


--------------------------------------------------------------------------------
/app/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import * as z from 'zod'
 3 | import type { FormSubmitEvent } from '@nuxt/ui'
 4 | 
 5 | definePageMeta({
 6 |   layout: 'auth'
 7 | })
 8 | 
 9 | useSeoMeta({
10 |   title: 'Login',
11 |   description: 'Login to your account to continue'
12 | })
13 | 
14 | const toast = useToast()
15 | 
16 | const fields = [{
17 |   name: 'email',
18 |   type: 'text' as const,
19 |   label: 'Email',
20 |   placeholder: 'Enter your email',
21 |   required: true
22 | }, {
23 |   name: 'password',
24 |   label: 'Password',
25 |   type: 'password' as const,
26 |   placeholder: 'Enter your password'
27 | }, {
28 |   name: 'remember',
29 |   label: 'Remember me',
30 |   type: 'checkbox' as const
31 | }]
32 | 
33 | const providers = [{
34 |   label: 'Google',
35 |   icon: 'i-simple-icons-google',
36 |   onClick: () => {
37 |     toast.add({ title: 'Google', description: 'Login with Google' })
38 |   }
39 | }, {
40 |   label: 'GitHub',
41 |   icon: 'i-simple-icons-github',
42 |   onClick: () => {
43 |     toast.add({ title: 'GitHub', description: 'Login with GitHub' })
44 |   }
45 | }]
46 | 
47 | const schema = z.object({
48 |   email: z.email('Invalid email'),
49 |   password: z.string().min(8, 'Must be at least 8 characters')
50 | })
51 | 
52 | type Schema = z.output<typeof schema>
53 | 
54 | function onSubmit(payload: FormSubmitEvent<Schema>) {
55 |   console.log('Submitted', payload)
56 | }
57 | </script>
58 | 
59 | <template>
60 |   <UAuthForm
61 |     :fields="fields"
62 |     :schema="schema"
63 |     :providers="providers"
64 |     title="Welcome back"
65 |     icon="i-lucide-lock"
66 |     @submit="onSubmit"
67 |   >
68 |     <template #description>
69 |       Don't have an account? <ULink
70 |         to="/signup"
71 |         class="text-primary font-medium"
72 |       >Sign up</ULink>.
73 |     </template>
74 | 
75 |     <template #password-hint>
76 |       <ULink
77 |         to="/"
78 |         class="text-primary font-medium"
79 |         tabindex="-1"
80 |       >Forgot password?</ULink>
81 |     </template>
82 | 
83 |     <template #footer>
84 |       By signing in, you agree to our <ULink
85 |         to="/"
86 |         class="text-primary font-medium"
87 |       >Terms of Service</ULink>.
88 |     </template>
89 |   </UAuthForm>
90 | </template>
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt SaaS 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 | Fully built SaaS application to launch your next project with a landing page, a pricing page, a documentation and a blog powered by [Nuxt UI](https://ui.nuxt.com) components.
 6 | 
 7 | - [Live demo](https://saas-template.nuxt.dev/)
 8 | - [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
 9 | 
10 | <a href="https://saas-template.nuxt.dev/" target="_blank">
11 |   <picture>
12 |     <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/saas-dark.png">
13 |     <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/saas-light.png">
14 |     <img alt="Nuxt SaaS Template" src="https://ui.nuxt.com/assets/templates/nuxt/saas-light.png">
15 |   </picture>
16 | </a>
17 | 
18 | ## Quick Start
19 | 
20 | ```bash [Terminal]
21 | npm create nuxt@latest -- -t github:nuxt-ui-templates/saas
22 | ```
23 | 
24 | ## Deploy your own
25 | 
26 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=saas&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fsaas&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fsaas-dark.png&demo-url=https%3A%2F%2Fsaas-template.nuxt.dev%2F&demo-title=Nuxt%20SaaS%20Template&demo-description=A%20SaaS%20template%20with%20landing%2C%20pricing%2C%20docs%20and%20blog%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/HeroBackground.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { isLoading } = useLoadingIndicator()
 3 | 
 4 | const appear = ref(false)
 5 | const appeared = ref(false)
 6 | 
 7 | onMounted(() => {
 8 |   setTimeout(() => {
 9 |     appear.value = true
10 |     setTimeout(() => {
11 |       appeared.value = true
12 |     }, 1000)
13 |   }, 0)
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <div
19 |     class="absolute w-full -top-px transition-all text-primary shrink-0"
20 |     :class="[
21 |       isLoading ? 'animate-pulse' : (appear ? '' : 'opacity-0'),
22 |       appeared ? 'duration-[400ms]': 'duration-1000'
23 |     ]"
24 |   >
25 |     <svg
26 |       viewBox="0 0 1440 181"
27 |       fill="none"
28 |       xmlns="http://www.w3.org/2000/svg"
29 |       class="pointer-events-none"
30 |     >
31 |       <mask
32 |         id="path-1-inside-1_414_5526"
33 |         fill="white"
34 |       >
35 |         <path d="M0 0H1440V181H0V0Z" />
36 |       </mask>
37 |       <path
38 |         d="M0 0H1440V181H0V0Z"
39 |         fill="url(#paint0_linear_414_5526)"
40 |         fill-opacity="0.22"
41 |       />
42 |       <path
43 |         d="M0 2H1440V-2H0V2Z"
44 |         fill="url(#paint1_linear_414_5526)"
45 |         mask="url(#path-1-inside-1_414_5526)"
46 |       />
47 |       <defs>
48 |         <linearGradient
49 |           id="paint0_linear_414_5526"
50 |           x1="720"
51 |           y1="0"
52 |           x2="720"
53 |           y2="181"
54 |           gradientUnits="userSpaceOnUse"
55 |         >
56 |           <stop stop-color="currentColor" />
57 |           <stop
58 |             offset="1"
59 |             stop-color="currentColor"
60 |             stop-opacity="0"
61 |           />
62 |         </linearGradient>
63 |         <linearGradient
64 |           id="paint1_linear_414_5526"
65 |           x1="0"
66 |           y1="90.5"
67 |           x2="1440"
68 |           y2="90.5"
69 |           gradientUnits="userSpaceOnUse"
70 |         >
71 |           <stop
72 |             stop-color="currentColor"
73 |             stop-opacity="0"
74 |           />
75 |           <stop
76 |             offset="0.395"
77 |             stop-color="currentColor"
78 |           />
79 |           <stop
80 |             offset="1"
81 |             stop-color="currentColor"
82 |             stop-opacity="0"
83 |           />
84 |         </linearGradient>
85 |       </defs>
86 |     </svg>
87 |   </div>
88 | </template>
89 | 


--------------------------------------------------------------------------------
/app/pages/pricing.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data: page } = await useAsyncData('pricing', () => queryCollection('pricing').first())
 3 | 
 4 | const title = page.value?.seo?.title || page.value?.title
 5 | const description = page.value?.seo?.description || page.value?.description
 6 | 
 7 | useSeoMeta({
 8 |   title,
 9 |   ogTitle: title,
10 |   description,
11 |   ogDescription: description
12 | })
13 | 
14 | defineOgImageComponent('Saas')
15 | 
16 | const isYearly = ref('0')
17 | 
18 | const items = ref([
19 |   {
20 |     label: 'Monthly',
21 |     value: '0'
22 |   },
23 |   {
24 |     label: 'Yearly',
25 |     value: '1'
26 |   }
27 | ])
28 | </script>
29 | 
30 | <template>
31 |   <div v-if="page">
32 |     <UPageHero
33 |       :title="page.title"
34 |       :description="page.description"
35 |     >
36 |       <template #links>
37 |         <UTabs
38 |           v-model="isYearly"
39 |           :items="items"
40 |           color="neutral"
41 |           size="xs"
42 |           class="w-48"
43 |           :ui="{
44 |             list: 'ring ring-accented rounded-full',
45 |             indicator: 'rounded-full',
46 |             trigger: 'w-1/2'
47 |           }"
48 |         />
49 |       </template>
50 |     </UPageHero>
51 | 
52 |     <UContainer>
53 |       <UPricingPlans scale>
54 |         <UPricingPlan
55 |           v-for="(plan, index) in page.plans"
56 |           :key="index"
57 |           v-bind="plan"
58 |           :price="isYearly === '1' ? plan.price.year : plan.price.month"
59 |           :billing-cycle="isYearly === '1' ? '/year' : '/month'"
60 |         />
61 |       </UPricingPlans>
62 |     </UContainer>
63 | 
64 |     <UPageSection>
65 |       <UPageLogos>
66 |         <UIcon
67 |           v-for="icon in page.logos.icons"
68 |           :key="icon"
69 |           :name="icon"
70 |           class="w-12 h-12 flex-shrink-0 text-muted"
71 |         />
72 |       </UPageLogos>
73 |     </UPageSection>
74 | 
75 |     <UPageSection
76 |       :title="page.faq.title"
77 |       :description="page.faq.description"
78 |     >
79 |       <UAccordion
80 |         :items="page.faq.items"
81 |         :unmount-on-hide="false"
82 |         :default-value="['0']"
83 |         type="multiple"
84 |         class="max-w-3xl mx-auto"
85 |         :ui="{
86 |           trigger: 'text-base text-highlighted',
87 |           body: 'text-base text-muted'
88 |         }"
89 |       />
90 |     </UPageSection>
91 |   </div>
92 | </template>
93 | 


--------------------------------------------------------------------------------
/app/pages/blog/[slug].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | 
 4 | const { data: post } = await useAsyncData(route.path, () => queryCollection('posts').path(route.path).first())
 5 | if (!post.value) {
 6 |   throw createError({ statusCode: 404, statusMessage: 'Post not found', fatal: true })
 7 | }
 8 | 
 9 | const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
10 |   return queryCollectionItemSurroundings('posts', route.path, {
11 |     fields: ['description']
12 |   })
13 | })
14 | 
15 | const title = post.value.seo?.title || post.value.title
16 | const description = post.value.seo?.description || post.value.description
17 | 
18 | useSeoMeta({
19 |   title,
20 |   ogTitle: title,
21 |   description,
22 |   ogDescription: description
23 | })
24 | 
25 | if (post.value.image?.src) {
26 |   defineOgImage({
27 |     url: post.value.image.src
28 |   })
29 | } else {
30 |   defineOgImageComponent('Saas', {
31 |     headline: 'Blog'
32 |   })
33 | }
34 | </script>
35 | 
36 | <template>
37 |   <UContainer v-if="post">
38 |     <UPageHeader
39 |       :title="post.title"
40 |       :description="post.description"
41 |     >
42 |       <template #headline>
43 |         <UBadge
44 |           v-bind="post.badge"
45 |           variant="subtle"
46 |         />
47 |         <span class="text-muted">&middot;</span>
48 |         <time class="text-muted">{{ new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' }) }}</time>
49 |       </template>
50 | 
51 |       <div class="flex flex-wrap items-center gap-3 mt-4">
52 |         <UButton
53 |           v-for="(author, index) in post.authors"
54 |           :key="index"
55 |           :to="author.to"
56 |           color="neutral"
57 |           variant="subtle"
58 |           target="_blank"
59 |           size="sm"
60 |         >
61 |           <UAvatar
62 |             v-bind="author.avatar"
63 |             alt="Author avatar"
64 |             size="2xs"
65 |           />
66 | 
67 |           {{ author.name }}
68 |         </UButton>
69 |       </div>
70 |     </UPageHeader>
71 | 
72 |     <UPage>
73 |       <UPageBody>
74 |         <ContentRenderer
75 |           v-if="post"
76 |           :value="post"
77 |         />
78 | 
79 |         <USeparator v-if="surround?.length" />
80 | 
81 |         <UContentSurround :surround="surround" />
82 |       </UPageBody>
83 | 
84 |       <template
85 |         v-if="post?.body?.toc?.links?.length"
86 |         #right
87 |       >
88 |         <UContentToc :links="post.body.toc.links" />
89 |       </template>
90 |     </UPage>
91 |   </UContainer>
92 | </template>
93 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data: page } = await useAsyncData('index', () => queryCollection('index').first())
 3 | 
 4 | const title = page.value?.seo?.title || page.value?.title
 5 | const description = page.value?.seo?.description || page.value?.description
 6 | 
 7 | useSeoMeta({
 8 |   titleTemplate: '',
 9 |   title,
10 |   ogTitle: title,
11 |   description,
12 |   ogDescription: description
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <div v-if="page">
18 |     <UPageHero
19 |       :title="page.title"
20 |       :description="page.description"
21 |       :links="page.hero.links"
22 |     >
23 |       <template #top>
24 |         <HeroBackground />
25 |       </template>
26 | 
27 |       <template #title>
28 |         <MDC
29 |           :value="page.title"
30 |           unwrap="p"
31 |         />
32 |       </template>
33 | 
34 |       <PromotionalVideo />
35 |     </UPageHero>
36 | 
37 |     <UPageSection
38 |       v-for="(section, index) in page.sections"
39 |       :key="index"
40 |       :title="section.title"
41 |       :description="section.description"
42 |       :orientation="section.orientation"
43 |       :reverse="section.reverse"
44 |       :features="section.features"
45 |     >
46 |       <ImagePlaceholder />
47 |     </UPageSection>
48 | 
49 |     <UPageSection
50 |       :title="page.features.title"
51 |       :description="page.features.description"
52 |     >
53 |       <UPageGrid>
54 |         <UPageCard
55 |           v-for="(item, index) in page.features.items"
56 |           :key="index"
57 |           v-bind="item"
58 |           spotlight
59 |         />
60 |       </UPageGrid>
61 |     </UPageSection>
62 | 
63 |     <UPageSection
64 |       id="testimonials"
65 |       :headline="page.testimonials.headline"
66 |       :title="page.testimonials.title"
67 |       :description="page.testimonials.description"
68 |     >
69 |       <UPageColumns class="xl:columns-4">
70 |         <UPageCard
71 |           v-for="(testimonial, index) in page.testimonials.items"
72 |           :key="index"
73 |           variant="subtle"
74 |           :description="testimonial.quote"
75 |           :ui="{ description: 'before:content-[open-quote] after:content-[close-quote]' }"
76 |         >
77 |           <template #footer>
78 |             <UUser
79 |               v-bind="testimonial.user"
80 |               size="lg"
81 |             />
82 |           </template>
83 |         </UPageCard>
84 |       </UPageColumns>
85 |     </UPageSection>
86 | 
87 |     <USeparator />
88 | 
89 |     <UPageCTA
90 |       v-bind="page.cta"
91 |       variant="naked"
92 |       class="overflow-hidden"
93 |     >
94 |       <LazyStarsBg />
95 |     </UPageCTA>
96 |   </div>
97 | </template>
98 | 


--------------------------------------------------------------------------------
/content/2.pricing.yml:
--------------------------------------------------------------------------------
 1 | title: A plan for every need
 2 | description: Our plans are designed to meet the requirements of both beginners and players. Get the right plan that suits you.
 3 | seo:
 4 |   title: Pricing
 5 |   description: Choose the plan that's right for you.
 6 | navigation.icon: i-lucide-credit-card
 7 | plans:
 8 |   - title: Basic
 9 |     description: A basic plan for individuals.
10 |     price:
11 |       month: $9.9
12 |       year: $99.9
13 |     button:
14 |       label: Get Started
15 |       color: neutral
16 |       variant: subtle
17 |     features:
18 |       - 1 GB Storage
19 |       - 1 Email Account
20 |       - 1 Domain
21 |       - 1 Website
22 |       - 1 Database
23 |       - 1 SSL Certificate
24 |       - 1 Support Ticket
25 |   - title: Standard
26 |     description: A standard plan for small teams.
27 |     price:
28 |       month: $19.9
29 |       year: $199.9
30 |     highlight: true
31 |     scale: true
32 |     button:
33 |       label: Get Started
34 |     features:
35 |       - 10 GB Storage
36 |       - 10 Email Accounts
37 |       - 10 Domains
38 |       - 10 Websites
39 |       - 10 Databases
40 |       - 10 SSL Certificates
41 |       - 10 Support Tickets
42 |   - title: Premium
43 |     description: A premium plan for large teams.
44 |     price:
45 |       month: $29.9
46 |       year: $299.9
47 |     button:
48 |       label: Get Started
49 |       color: neutral
50 |       variant: subtle
51 |     features:
52 |       - 100 GB Storage
53 |       - 100 Email Accounts
54 |       - 100 Domains
55 |       - 100 Websites
56 |       - 100 Databases
57 |       - 100 SSL Certificates
58 |       - 100 Support Tickets
59 | logos:
60 |   title: Trusted by the world's best
61 |   icons:
62 |     - i-simple-icons-amazonaws
63 |     - i-simple-icons-heroku
64 |     - i-simple-icons-netlify
65 |     - i-simple-icons-vercel
66 |     - i-simple-icons-cloudflare
67 | faq:
68 |   title: Frequently asked questions
69 |   description: Culpa consectetur dolor pariatur commodo aliqua amet tempor nisi enim deserunt elit cillum.
70 |   items:
71 |     - label: Is this a secure service?
72 |       content: Qui sunt nostrud aliquip reprehenderit enim proident veniam magna aliquip velit occaecat eiusmod nisi deserunt sunt.
73 |     - label: How can I cancel my subscription?
74 |       content: Consectetur irure Lorem nostrud adipisicing aliqua mollit Lorem sit officia magna eiusmod cupidatat.
75 |     - label: How does the free trial work?
76 |       content: Quis officia commodo magna eu qui aliquip duis.
77 |     - label: Can I switch plans later?
78 |       content: Dolore irure ullamco dolore eu occaecat magna eiusmod dolor aliqua culpa labore.
79 |     - label: Do you offer refunds?
80 |       content: Duis mollit nostrud voluptate mollit Lorem dolore commodo veniam incididunt eiusmod.
81 |     - label: Do you offer support?
82 |       content: Aliqua sit nisi consequat pariatur Lorem minim irure qui.
83 | 


--------------------------------------------------------------------------------
/app/components/AppFooter.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const columns = [{
  3 |   label: 'Resources',
  4 |   children: [{
  5 |     label: 'Help center'
  6 |   }, {
  7 |     label: 'Docs'
  8 |   }, {
  9 |     label: 'Roadmap'
 10 |   }, {
 11 |     label: 'Changelog'
 12 |   }]
 13 | }, {
 14 |   label: 'Features',
 15 |   children: [{
 16 |     label: 'Affiliates'
 17 |   }, {
 18 |     label: 'Portal'
 19 |   }, {
 20 |     label: 'Jobs'
 21 |   }, {
 22 |     label: 'Sponsors'
 23 |   }]
 24 | }, {
 25 |   label: 'Company',
 26 |   children: [{
 27 |     label: 'About'
 28 |   }, {
 29 |     label: 'Pricing'
 30 |   }, {
 31 |     label: 'Careers'
 32 |   }, {
 33 |     label: 'Blog'
 34 |   }]
 35 | }]
 36 | 
 37 | const toast = useToast()
 38 | 
 39 | const email = ref('')
 40 | const loading = ref(false)
 41 | 
 42 | function onSubmit() {
 43 |   loading.value = true
 44 | 
 45 |   toast.add({
 46 |     title: 'Subscribed!',
 47 |     description: 'You\'ve been subscribed to our newsletter.'
 48 |   })
 49 | }
 50 | </script>
 51 | 
 52 | <template>
 53 |   <USeparator
 54 |     icon="i-simple-icons-nuxtdotjs"
 55 |     class="h-px"
 56 |   />
 57 | 
 58 |   <UFooter :ui="{ top: 'border-b border-default' }">
 59 |     <template #top>
 60 |       <UContainer>
 61 |         <UFooterColumns :columns="columns">
 62 |           <template #right>
 63 |             <form @submit.prevent="onSubmit">
 64 |               <UFormField
 65 |                 name="email"
 66 |                 label="Subscribe to our newsletter"
 67 |                 size="lg"
 68 |               >
 69 |                 <UInput
 70 |                   v-model="email"
 71 |                   type="email"
 72 |                   class="w-full"
 73 |                   placeholder="Enter your email"
 74 |                 >
 75 |                   <template #trailing>
 76 |                     <UButton
 77 |                       type="submit"
 78 |                       size="xs"
 79 |                       color="neutral"
 80 |                       label="Subscribe"
 81 |                     />
 82 |                   </template>
 83 |                 </UInput>
 84 |               </UFormField>
 85 |             </form>
 86 |           </template>
 87 |         </UFooterColumns>
 88 |       </UContainer>
 89 |     </template>
 90 | 
 91 |     <template #left>
 92 |       <p class="text-muted text-sm">
 93 |         Built with Nuxt UI • © {{ new Date().getFullYear() }}
 94 |       </p>
 95 |     </template>
 96 | 
 97 |     <template #right>
 98 |       <UButton
 99 |         to="https://go.nuxt.com/discord"
100 |         target="_blank"
101 |         icon="i-simple-icons-discord"
102 |         aria-label="Nuxt on Discord"
103 |         color="neutral"
104 |         variant="ghost"
105 |       />
106 |       <UButton
107 |         to="https://go.nuxt.com/x"
108 |         target="_blank"
109 |         icon="i-simple-icons-x"
110 |         aria-label="Nuxt on X"
111 |         color="neutral"
112 |         variant="ghost"
113 |       />
114 |       <UButton
115 |         to="https://github.com/nuxt-ui-templates/saas"
116 |         target="_blank"
117 |         icon="i-simple-icons-github"
118 |         aria-label="Nuxt UI on GitHub"
119 |         color="neutral"
120 |         variant="ghost"
121 |       />
122 |     </template>
123 |   </UFooter>
124 | </template>
125 | 


--------------------------------------------------------------------------------
/app/components/AppLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     width="1020"
 4 |     height="200"
 5 |     viewBox="0 0 1020 200"
 6 |     fill="none"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z"
11 |       fill="currentColor"
12 |     />
13 |     <path
14 |       d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z"
15 |       fill="currentColor"
16 |     />
17 |     <path
18 |       d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z"
19 |       fill="currentColor"
20 |     />
21 |     <path
22 |       d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z"
23 |       fill="currentColor"
24 |     />
25 |     <path
26 |       d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
27 |       fill="var(--ui-primary)"
28 |     />
29 |     <path
30 |       d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z"
31 |       fill="var(--ui-primary)"
32 |     />
33 |     <path
34 |       fill-rule="evenodd"
35 |       clip-rule="evenodd"
36 |       d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z"
37 |       fill="var(--ui-primary)"
38 |     />
39 |   </svg>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/content/3.blog/3.james-webb.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Unveiling the Marvel
 3 | description: The Journey to Create the James Webb Space Telescope
 4 | image:
 5 |   src: https://picsum.photos/id/903/640/360
 6 | authors:
 7 |   - name: Josh Bayers
 8 |     to: https://twitter.com/benjamincanac
 9 |     avatar:
10 |       src: https://i.pravatar.cc/128?u=2
11 | date: 2020-12-12
12 | badge:
13 |   label: Science, Astronomie, History
14 | ---
15 | 
16 | ## Building the Vision
17 | 
18 | ::picture-and-text
19 | ### Designing the Future
20 | 
21 | In the bustling halls of NASA's engineering facilities, a team of brilliant minds gathered around blueprints and prototypes. They envisioned a telescope unlike any other, one that would revolutionize our understanding of the cosmos. Led by Dr. Catherine Nguyen, they meticulously crafted the design for what would become the James Webb Space Telescope (JWST). With its massive primary mirror and cutting-edge infrared technology, the JWST promised to unveil the deepest mysteries of the universe.
22 | 
23 | #image
24 | ![sky](https://picsum.photos/id/120/400/400){.rounded-lg height="400" width="400"}
25 | ::
26 | 
27 | ::picture-and-text
28 | ---
29 | reverse: true
30 | ---
31 | ### Overcoming Challenges
32 | 
33 | However, the path to launch was fraught with challenges. Engineers faced immense pressure to ensure the JWST's success, navigating technical hurdles and budget constraints. Delays mounted as unforeseen complications arose, testing the team's resolve. Yet, fueled by their passion for exploration, they pressed onward, refining each component with unwavering determination. Through perseverance and ingenuity, they transformed the JWST from a concept into a marvel of modern engineering.
34 | 
35 | #image
36 | ![mountain](https://picsum.photos/id/235/400/400){.rounded-lg height="400" width="400"}
37 | ::
38 | 
39 | ## Embarking into the Unknown
40 | 
41 | ::picture-and-text
42 | ### Launching into Space
43 | 
44 | On a crisp morning at the Guiana Space Centre in French Guiana, anticipation hung in the air as the JWST stood tall atop its Ariane 5 rocket. Millions around the world held their breath as countdown reached its final moments. Then, with a thunderous roar, the rocket ignited, propelling the telescope into the vast expanse of space. As it soared higher and higher, the JWST represented humanity's boundless curiosity and relentless pursuit of knowledge.
45 | 
46 | #image
47 | ![rocket](https://picsum.photos/id/137/400/400){.rounded-lg height="400" width="400"}
48 | ::
49 | 
50 | ::picture-and-text
51 | ---
52 | reverse: true
53 | ---
54 | ### Unfolding the Universe
55 | 
56 | Months later, nestled in its orbit around the Earth, the JWST embarked on its monumental mission. With its golden mirrors unfurled like petals, it peered into the depths of the cosmos, capturing breathtaking images of distant galaxies and nebulae. Each observation unveiled new wonders, shedding light on the origins of stars, planets, and life itself. From the icy realms of the outer solar system to the fiery cores of distant exoplanets, the JWST's gaze transcended the limits of human imagination.
57 | 
58 | #image
59 | ![universe](https://picsum.photos/id/974/400/400){.rounded-lg height="400" width="400"}
60 | ::
61 | 
62 | ## Legacy of Discovery
63 | 
64 | ::picture-and-text
65 | ### Inspiring Future Generations
66 | 
67 | As the years passed, the JWST's legacy continued to grow, inspiring generations to dream of the stars. Its groundbreaking discoveries sparked scientific revolutions and expanded humanity's collective understanding of the universe. From classrooms to observatories, its images adorned the walls, igniting the spark of curiosity in the minds of countless individuals. The JWST served as a beacon of hope, reminding us of our capacity to explore, discover, and unite in pursuit of a shared destiny among the stars.
68 | 
69 | #image
70 | ![woman](https://picsum.photos/id/550/400/400){.rounded-lg height="400" width="400"}
71 | ::
72 | 
73 | ::picture-and-text
74 | ---
75 | reverse: true
76 | ---
77 | ### A Journey Without End
78 | 
79 | Though the JWST's mission eventually came to a close, its impact endured far beyond the boundaries of space and time. Its data continued to fuel scientific inquiry for decades to come, unlocking new realms of knowledge and shaping the course of human history. And as future telescopes followed in its wake, each building upon its pioneering legacy, the spirit of exploration embodied by the James Webb Space Telescope lived on, guiding humanity toward ever greater heights of discovery and understanding.
80 | 
81 | #image
82 | ![sunset](https://picsum.photos/id/967/400/400){.rounded-lg height="400" width="400"}
83 | ::
84 | 


--------------------------------------------------------------------------------
/content/3.blog/4.meditation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: The Benefits of Meditation
 3 | description: The Benefits of Meditation and Mindfulness Practices on Mental Health
 4 | image:
 5 |   src: https://picsum.photos/id/691/640/360
 6 | authors:
 7 |   - name: Rebecca Millers
 8 |     to: https://twitter.com/benjamincanac
 9 |     avatar:
10 |       src: https://i.pravatar.cc/128?u=3
11 | date: 2021-04-23
12 | badge:
13 |   label: Health
14 | ---
15 | 
16 | ![grass in wood](https://picsum.photos/id/55/1200/600){.rounded-lg height="600" width="1200"}
17 | 
18 | ## 🧘🏻 Introduction
19 | 
20 | In today's fast-paced world, where stress and anxiety seem to be constant companions, the importance of mental well-being cannot be overstated. Fortunately, there are ancient practices like meditation and mindfulness that offer profound benefits for our mental health. Research continues to uncover the transformative effects of these practices, showing how they can help alleviate stress, improve focus, and cultivate a sense of inner peace and resilience.
21 | 
22 | ## 🪷 Understanding Meditation and Mindfulness
23 | 
24 | Meditation is a practice that involves training the mind to focus and redirect thoughts. It often involves techniques such as deep breathing, visualization, or repeating a mantra. Mindfulness, on the other hand, is about being fully present in the moment, acknowledging and accepting one's thoughts, feelings, and bodily sensations without judgment.
25 | 
26 | One of the most well-documented benefits of meditation and mindfulness is their ability to reduce stress and anxiety. Studies have shown that regular meditation practice can lower levels of cortisol, the stress hormone, in the body. By quieting the mind and promoting relaxation, meditation helps to interrupt the cycle of anxious thoughts and bodily tension, leading to a greater sense of calm and tranquility.
27 | 
28 | ::pictures
29 |   :::div
30 |   ![flowers](https://picsum.photos/id/106/600/200){.rounded-lg height="200" width="600"}
31 |   :::
32 | 
33 |   :::div
34 |   ![sakura](https://picsum.photos/id/82/600/200){.rounded-lg height="200" width="600"}
35 |   :::
36 | ::
37 | 
38 | ## 🧠 Improved Focus and Cognitive Function
39 | 
40 | In today's digital age, our attention is constantly pulled in multiple directions, leading to reduced focus and cognitive overload. Meditation and mindfulness have been found to enhance cognitive function by increasing attention span, concentration, and memory. By training the mind to stay present and focused, these practices can improve productivity and mental clarity, enabling individuals to perform better in various tasks and activities.
41 | 
42 | ## 😌 Enhanced Emotional Well-being
43 | 
44 | Another significant benefit of meditation and mindfulness is their positive impact on emotional well-being. By fostering self-awareness and acceptance, these practices help individuals develop a healthier relationship with their emotions. Studies have shown that regular meditation can reduce symptoms of depression and anxiety disorders, while also increasing feelings of happiness and overall life satisfaction.
45 | 
46 | ## 💪🏻 Building Resilience and Coping Skills
47 | 
48 | ![water](https://picsum.photos/id/126/1200/300){.rounded-lg height="300" width="1200"}
49 | 
50 | Life is filled with ups and downs, challenges, and setbacks. Meditation and mindfulness provide valuable tools for building resilience and coping with adversity. By cultivating a sense of inner strength and equanimity, these practices help individuals navigate difficult situations with greater ease and grace. They teach us to respond to stressors with mindfulness and compassion, rather than reacting impulsively out of fear or frustration.
51 | 
52 | ## ❤️ Cultivating a Sense of Connection and Compassion
53 | 
54 | Beyond benefiting individual mental health, meditation and mindfulness also promote a greater sense of connection and compassion towards others. By cultivating empathy and understanding, these practices foster harmonious relationships and a sense of interconnectedness with the world around us. They remind us that we are all part of a larger tapestry of humanity, bound together by our shared experiences and aspirations.
55 | 
56 | ## 🫶🏻 Conclusion
57 | 
58 | In conclusion, the benefits of meditation and mindfulness on mental health are undeniable. From reducing stress and anxiety to improving focus, emotional well-being, and resilience, these ancient practices offer a holistic approach to mental wellness in an increasingly hectic world. By incorporating meditation and mindfulness into our daily lives, we can nurture a sense of inner peace, balance, and contentment that radiates outward, enriching not only our own lives but the lives of those around us as well.
59 | 
60 | ![nenuphar](https://picsum.photos/id/306/1200/600){.rounded-lg height="600" width="1200"}
61 | 


--------------------------------------------------------------------------------
/content.config.ts:
--------------------------------------------------------------------------------
  1 | import { defineCollection, z } from '@nuxt/content'
  2 | 
  3 | const variantEnum = z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link'])
  4 | const colorEnum = z.enum(['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info'])
  5 | const sizeEnum = z.enum(['xs', 'sm', 'md', 'lg', 'xl'])
  6 | const orientationEnum = z.enum(['vertical', 'horizontal'])
  7 | 
  8 | const createBaseSchema = () => z.object({
  9 |   title: z.string().nonempty(),
 10 |   description: z.string().nonempty()
 11 | })
 12 | 
 13 | const createFeatureItemSchema = () => createBaseSchema().extend({
 14 |   icon: z.string().nonempty().editor({ input: 'icon' })
 15 | })
 16 | 
 17 | const createLinkSchema = () => z.object({
 18 |   label: z.string().nonempty(),
 19 |   to: z.string().nonempty(),
 20 |   icon: z.string().optional().editor({ input: 'icon' }),
 21 |   size: sizeEnum.optional(),
 22 |   trailing: z.boolean().optional(),
 23 |   target: z.string().optional(),
 24 |   color: colorEnum.optional(),
 25 |   variant: variantEnum.optional()
 26 | })
 27 | 
 28 | const createImageSchema = () => z.object({
 29 |   src: z.string().nonempty().editor({ input: 'media' }),
 30 |   alt: z.string().optional(),
 31 |   loading: z.enum(['lazy', 'eager']).optional(),
 32 |   srcset: z.string().optional()
 33 | })
 34 | 
 35 | export const collections = {
 36 |   index: defineCollection({
 37 |     source: '0.index.yml',
 38 |     type: 'page',
 39 |     schema: z.object({
 40 |       hero: z.object(({
 41 |         links: z.array(createLinkSchema())
 42 |       })),
 43 |       sections: z.array(
 44 |         createBaseSchema().extend({
 45 |           id: z.string().nonempty(),
 46 |           orientation: orientationEnum.optional(),
 47 |           reverse: z.boolean().optional(),
 48 |           features: z.array(createFeatureItemSchema())
 49 |         })
 50 |       ),
 51 |       features: createBaseSchema().extend({
 52 |         items: z.array(createFeatureItemSchema())
 53 |       }),
 54 |       testimonials: createBaseSchema().extend({
 55 |         headline: z.string().optional(),
 56 |         items: z.array(
 57 |           z.object({
 58 |             quote: z.string().nonempty(),
 59 |             user: z.object({
 60 |               name: z.string().nonempty(),
 61 |               description: z.string().nonempty(),
 62 |               to: z.string().nonempty(),
 63 |               target: z.string().nonempty(),
 64 |               avatar: createImageSchema()
 65 |             })
 66 |           })
 67 |         )
 68 |       }),
 69 |       cta: createBaseSchema().extend({
 70 |         links: z.array(createLinkSchema())
 71 |       })
 72 |     })
 73 |   }),
 74 |   docs: defineCollection({
 75 |     source: '1.docs/**/*',
 76 |     type: 'page'
 77 |   }),
 78 |   pricing: defineCollection({
 79 |     source: '2.pricing.yml',
 80 |     type: 'page',
 81 |     schema: z.object({
 82 |       plans: z.array(
 83 |         z.object({
 84 |           title: z.string().nonempty(),
 85 |           description: z.string().nonempty(),
 86 |           price: z.object({
 87 |             month: z.string().nonempty(),
 88 |             year: z.string().nonempty()
 89 |           }),
 90 |           billing_period: z.string().nonempty(),
 91 |           billing_cycle: z.string().nonempty(),
 92 |           button: createLinkSchema(),
 93 |           features: z.array(z.string().nonempty()),
 94 |           highlight: z.boolean().optional()
 95 |         })
 96 |       ),
 97 |       logos: z.object({
 98 |         title: z.string().nonempty(),
 99 |         icons: z.array(z.string())
100 |       }),
101 |       faq: createBaseSchema().extend({
102 |         items: z.array(
103 |           z.object({
104 |             label: z.string().nonempty(),
105 |             content: z.string().nonempty()
106 |           })
107 |         )
108 |       })
109 |     })
110 |   }),
111 |   blog: defineCollection({
112 |     source: '3.blog.yml',
113 |     type: 'page'
114 |   }),
115 |   posts: defineCollection({
116 |     source: '3.blog/**/*',
117 |     type: 'page',
118 |     schema: z.object({
119 |       image: z.object({ src: z.string().nonempty().editor({ input: 'media' }) }),
120 |       authors: z.array(
121 |         z.object({
122 |           name: z.string().nonempty(),
123 |           to: z.string().nonempty(),
124 |           avatar: z.object({ src: z.string().nonempty().editor({ input: 'media' }) })
125 |         })
126 |       ),
127 |       date: z.date(),
128 |       badge: z.object({ label: z.string().nonempty() })
129 |     })
130 |   }),
131 |   changelog: defineCollection({
132 |     source: '4.changelog.yml',
133 |     type: 'page'
134 |   }),
135 |   versions: defineCollection({
136 |     source: '4.changelog/**/*',
137 |     type: 'page',
138 |     schema: z.object({
139 |       title: z.string().nonempty(),
140 |       description: z.string(),
141 |       date: z.date(),
142 |       image: z.string()
143 |     })
144 |   })
145 | }
146 | 


--------------------------------------------------------------------------------
/content/3.blog/2.pyrenees.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Discovering the Majestic Peaks
  3 | description: Embark on an unforgettable odyssey through the Pyrenees, where
  4 |   majestic peaks, pristine valleys, and rich cultural tapestries await in this
  5 |   immersive exploration.
  6 | image:
  7 |   src: https://picsum.photos/id/29/640/360
  8 | authors:
  9 |   - name: Nicolas Maillet
 10 |     to: https://twitter.com/benjamincanac
 11 |     avatar:
 12 |       src: https://i.pravatar.cc/128?u=1
 13 | date: 2022-07-08
 14 | badge:
 15 |   label: Nature
 16 | ---
 17 | 
 18 | ## Introduction to the Pyrenean Wonderland
 19 | 
 20 | Embark on a breathtaking exploration of the Pyrenees, a mountain range that weaves its way between Spain and France, standing as a majestic guardian of natural beauty. This chapter introduces you to the rugged charm and ecological diversity that make the Pyrenees a haven for adventure seekers and nature enthusiasts alike.
 21 | 
 22 | The Pyrenees are not merely a geographical boundary; they are a realm of awe-inspiring landscapes, ranging from lush green valleys to snow-capped peaks. The pristine wilderness is home to a diverse array of flora and fauna, creating a captivating tapestry of life that unfolds as you ascend.
 23 | 
 24 | ![mountains](https://picsum.photos/id/11/1000/600){.rounded-lg height="600" width="1000"}
 25 | 
 26 | ## Peaks and Valleys - Nature's Masterpiece
 27 | 
 28 | Delve into the heart of the Pyrenees, where towering peaks touch the sky, and deep valleys cradle crystal-clear lakes and meandering rivers. From the iconic Pic du Midi to the serene Cirque de Gavarnie, each summit tells a story of geological wonder and natural splendor.
 29 | 
 30 | Explore the verdant meadows adorned with wildflowers, witness the dance of marmots in rocky outcrops, and breathe in the crisp mountain air. The Pyrenees offer a sanctuary for biodiversity, where rare species find refuge in the untouched wilderness.
 31 | 
 32 | ::pictures
 33 |   :::div
 34 |   ![rocks](https://picsum.photos/id/15/400/400){.rounded-lg height="400" width="400"}
 35 |   :::
 36 | 
 37 |   :::div
 38 |   ![valley](https://picsum.photos/id/28/400/400){.rounded-lg height="400" width="400"}
 39 |   :::
 40 | 
 41 |   :::div
 42 |   ![mountains](https://picsum.photos/id/29/400/400){.rounded-lg height="400" width="400"}
 43 |   :::
 44 | ::
 45 | 
 46 | ## A Tapestry of Culture and History
 47 | 
 48 | Beyond its natural wonders, the Pyrenees boast a rich tapestry of human history and cultural heritage. Ancient pilgrimage routes like the Camino de Santiago wind their way through picturesque villages, medieval castles cling to mountain slopes, and traditional mountain festivals celebrate the spirit of the local communities.
 49 | 
 50 | Discover the legends that echo through the valleys, from tales of shepherds and their flocks to the myths that shroud hidden caves. The Pyrenees bear witness to centuries of human existence, leaving behind a cultural legacy that adds depth to the mountainous landscape.
 51 | 
 52 | ::pictures{orientation="vertical"}
 53 |   :::div
 54 |   ![valley](https://picsum.photos/id/118/1200/400){.rounded-lg.w-full height="400" width="1200"}
 55 |   :::
 56 | 
 57 |   :::pictures
 58 |     ::::div
 59 |     ![valley](https://picsum.photos/id/121/600/400){.rounded-lg height="400" width="600"}
 60 |     ::::
 61 |   
 62 |     ::::div
 63 |     ![traveler](https://picsum.photos/id/177/600/400){.rounded-lg height="400" width="600"}
 64 |     ::::
 65 |   
 66 |     ::::div
 67 |     ::::
 68 |   :::
 69 | ::
 70 | 
 71 | ## Outdoor Adventures in the Pyrenean Playground
 72 | 
 73 | For the adventure-seekers, the Pyrenees offer an exhilarating playground. Whether it's scaling peaks, hiking through ancient trails, or skiing down powdery slopes, there's no shortage of adrenaline-pumping activities. Traverse the GR10, a long-distance hiking trail that spans the entire length of the Pyrenees, or test your mettle on the challenging rock faces that beckon climbers from around the world.
 74 | 
 75 | The Pyrenees cater to all levels of outdoor enthusiasts, making it a haven for both seasoned mountaineers and casual hikers. The variety of landscapes ensures that every outdoor pursuit comes with a stunning backdrop of nature's grandeur.
 76 | 
 77 | ::pictures
 78 |   :::div
 79 |   ![wood](https://picsum.photos/id/190/200/200){.rounded-lg height="200" width="200"}
 80 |   :::
 81 | 
 82 |   :::div
 83 |   ![cow](https://picsum.photos/id/200/200/200){.rounded-lg height="200" width="200"}
 84 |   :::
 85 | 
 86 |   :::div
 87 |   ![meadow](https://picsum.photos/id/206/200/200){.rounded-lg height="200" width="200"}
 88 |   :::
 89 | 
 90 |   :::div
 91 |   ![birds](https://picsum.photos/id/258/200/200){.rounded-lg height="200" width="200"}
 92 |   :::
 93 | ::
 94 | 
 95 | ::pictures
 96 |   :::div
 97 |   ![road](https://picsum.photos/id/278/600/300){.rounded-lg.w-full height="300" width="600"}
 98 |   :::
 99 | 
100 |   :::div
101 |   ![hole in a rock](https://picsum.photos/id/343/600/300){.rounded-lg.w-full height="300" width="600"}
102 |   :::
103 | ::
104 | 
105 | ## Preserving the Pyrenean Legacy
106 | 
107 | As we look to the future, conservation efforts and sustainable tourism initiatives are vital for preserving the Pyrenees' unique ecosystem. Balancing the thrill of exploration with the responsibility of preservation ensures that future generations can continue to be captivated by the untamed beauty of these ancient mountains.
108 | 
109 | In conclusion, 'Discovering the Majestic Peaks: A Journey Through the Pyrenees' invites you to witness the grandeur of a mountain range that transcends geographical boundaries, offering a symphony of nature, culture, and adventure in every chapter.
110 | 
111 | ![mountains](https://picsum.photos/id/368/600/300){.rounded-lg.w-full height="300" width="600"}
112 | 


--------------------------------------------------------------------------------
/app/components/StarsBg.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | interface Star {
  3 |   x: number
  4 |   y: number
  5 |   size: number
  6 | }
  7 | 
  8 | const props = withDefaults(defineProps<{
  9 |   starCount?: number
 10 |   color?: string
 11 |   speed?: 'slow' | 'normal' | 'fast'
 12 |   size?: { min: number, max: number }
 13 | }>(), {
 14 |   starCount: 300,
 15 |   color: 'var(--ui-primary)',
 16 |   speed: 'normal',
 17 |   size: () => ({
 18 |     min: 1,
 19 |     max: 2
 20 |   })
 21 | })
 22 | 
 23 | // Generate random star positions and sizes
 24 | const generateStars = (count: number): Star[] => {
 25 |   return Array.from({ length: count }, () => ({
 26 |     x: Math.floor(Math.random() * 2000),
 27 |     y: Math.floor(Math.random() * 2000),
 28 |     size: typeof props.size === 'number'
 29 |       ? props.size
 30 |       : Math.random() * (props.size.max - props.size.min) + props.size.min
 31 |   }))
 32 | }
 33 | 
 34 | // Define speed configurations once
 35 | const speedMap = {
 36 |   slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
 37 |   normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
 38 |   fast: { duration: 100, opacity: 1, ratio: 0.4 }
 39 | }
 40 | 
 41 | // Use a more efficient approach to generate and store stars
 42 | const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>('stars', () => {
 43 |   return {
 44 |     slow: generateStars(Math.floor(props.starCount * speedMap.slow.ratio)),
 45 |     normal: generateStars(Math.floor(props.starCount * speedMap.normal.ratio)),
 46 |     fast: generateStars(Math.floor(props.starCount * speedMap.fast.ratio))
 47 |   }
 48 | })
 49 | 
 50 | // Compute star layers with different speeds and opacities
 51 | const starLayers = computed(() => [
 52 |   { stars: stars.value.fast, ...speedMap.fast },
 53 |   { stars: stars.value.normal, ...speedMap.normal },
 54 |   { stars: stars.value.slow, ...speedMap.slow }
 55 | ])
 56 | </script>
 57 | 
 58 | <template>
 59 |   <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
 60 |     <svg
 61 |       class="absolute inset-0 pointer-events-none"
 62 |       viewBox="0 0 1017 181"
 63 |       fill="none"
 64 |       xmlns="http://www.w3.org/2000/svg"
 65 |     >
 66 |       <g opacity="0.5">
 67 |         <mask
 68 |           id="path-1-inside-1_846_160841"
 69 |           fill="white"
 70 |         >
 71 |           <path d="M0 0H1017V181H0V0Z" />
 72 |         </mask>
 73 |         <path
 74 |           d="M0 0H1017V181H0V0Z"
 75 |           fill="url(#paint0_radial_846_160841)"
 76 |           fill-opacity="0.22"
 77 |         />
 78 |       </g>
 79 |       <defs>
 80 |         <radialGradient
 81 |           id="paint0_radial_846_160841"
 82 |           cx="0"
 83 |           cy="0"
 84 |           r="1"
 85 |           gradientUnits="userSpaceOnUse"
 86 |           gradientTransform="translate(508.999 19.5) rotate(90.177) scale(161.501 509.002)"
 87 |         >
 88 |           <stop stop-color="var(--ui-primary)" />
 89 |           <stop
 90 |             offset="1"
 91 |             stop-color="var(--ui-primary)"
 92 |             stop-opacity="0"
 93 |           />
 94 |         </radialGradient>
 95 |         <linearGradient
 96 |           id="paint1_linear_846_160841"
 97 |           x1="10.9784"
 98 |           y1="91"
 99 |           x2="1017"
100 |           y2="90.502"
101 |           gradientUnits="userSpaceOnUse"
102 |         >
103 |           <stop
104 |             stop-color="var(--ui-primary)"
105 |             stop-opacity="0"
106 |           />
107 |           <stop
108 |             offset="0.395"
109 |             stop-color="var(--ui-primary)"
110 |           />
111 |           <stop
112 |             offset="1"
113 |             stop-color="var(--ui-primary)"
114 |             stop-opacity="0"
115 |           />
116 |         </linearGradient>
117 |       </defs>
118 |     </svg>
119 | 
120 |     <div class="stars size-full absolute inset-x-0 top-0">
121 |       <div
122 |         v-for="(layer, index) in starLayers"
123 |         :key="index"
124 |         class="star-layer"
125 |         :style="{
126 |           '--star-duration': `${layer.duration}s`,
127 |           '--star-opacity': layer.opacity,
128 |           '--star-color': color
129 |         }"
130 |       >
131 |         <div
132 |           v-for="(star, starIndex) in layer.stars"
133 |           :key="starIndex"
134 |           class="star absolute rounded-full"
135 |           :style="{
136 |             left: `${star.x}px`,
137 |             top: `${star.y}px`,
138 |             width: `${star.size}px`,
139 |             height: `${star.size}px`,
140 |             backgroundColor: 'var(--star-color)',
141 |             opacity: 'var(--star-opacity)'
142 |           }"
143 |         />
144 |       </div>
145 |     </div>
146 |   </div>
147 | </template>
148 | 
149 | <style scoped>
150 | .stars {
151 |   left: 50%;
152 |   transform: translate(-50%);
153 |   -webkit-mask-image: linear-gradient(180deg,
154 |       rgba(217, 217, 217, 0) 0%,
155 |       rgba(217, 217, 217, 0.8) 25%,
156 |       #d9d9d9 50%,
157 |       rgba(217, 217, 217, 0.8) 75%,
158 |       rgba(217, 217, 217, 0) 100%);
159 |   mask-image: linear-gradient(180deg,
160 |       rgba(217, 217, 217, 0) 0%,
161 |       rgba(217, 217, 217, 0.8) 25%,
162 |       #d9d9d9 50%,
163 |       rgba(217, 217, 217, 0.8) 75%,
164 |       rgba(217, 217, 217, 0) 100%);
165 |   -webkit-mask-size: cover;
166 |   mask-size: cover;
167 | }
168 | 
169 | .star-layer {
170 |   animation: risingStarsAnimation linear infinite;
171 |   animation-duration: var(--star-duration);
172 |   will-change: transform;
173 | }
174 | 
175 | @keyframes risingStarsAnimation {
176 |   0% {
177 |     transform: translateY(0);
178 |   }
179 |   100% {
180 |     transform: translateY(-2000px);
181 |   }
182 | }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/content/3.blog/5.animals.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: The 10 Most Dangerous Creatures on Earth
  3 | description: From Predators to the Ultimate Threat
  4 | image:
  5 |   src: https://picsum.photos/id/219/640/360
  6 | authors:
  7 |   - name: Emilio Manuel
  8 |     to: https://twitter.com/benjamincanac
  9 |     avatar:
 10 |       src: https://i.pravatar.cc/128?u=4
 11 | date: 2018-05-15
 12 | badge:
 13 |   label: Animals
 14 | ---
 15 | 
 16 | The natural world is teeming with creatures of all shapes and sizes, each with its own unique set of adaptations and behaviors. While many animals pose little threat to humans, there are some that command respect and caution due to their deadly capabilities. From apex predators to venomous insects, let's explore the 10 most dangerous creatures on Earth, culminating in the ultimate threat: humans.
 17 | 
 18 | ## Lion
 19 | 
 20 | ::picture-and-text
 21 | ---
 22 | card: true
 23 | ---
 24 | **Tigers** are dangerous to humans because of their immense strength, powerful jaws, and sharp claws, capable of causing fatal injuries. Additionally, tigers are territorial and can become highly aggressive if they feel threatened or if their territory is encroached upon.
 25 | 
 26 | #image
 27 | ![Lion](https://picsum.photos/id/1074/800/400){.rounded-lg height="400" width="800"}
 28 | ::
 29 | 
 30 | ## Monkeys
 31 | 
 32 | ::picture-and-text
 33 | ---
 34 | card: true
 35 | ---
 36 | **Monkeys** are dangerous to humans due to their sharp teeth and strong jaws, which can inflict serious bites, and their potential to carry and transmit diseases such as rabies. Additionally, monkeys can become aggressive if they feel threatened or if they are protecting their young.
 37 | 
 38 | #image
 39 | ![monkey](https://picsum.photos/id/783/800/400){.rounded-lg height="400" width="800"}
 40 | ::
 41 | 
 42 | ## Wolf
 43 | 
 44 | ::picture-and-text
 45 | ---
 46 | card: true
 47 | ---
 48 | **Wolves** are dangerous to humans due to their pack hunting behavior, which can overwhelm and outnumber a person, and their strong jaws capable of inflicting serious injuries. Additionally, wolves may become aggressive if they feel their territory or pack is threatened.
 49 | 
 50 | #image
 51 | ![wolf](https://picsum.photos/id/582/800/400){.rounded-lg height="400" width="800"}
 52 | ::
 53 | 
 54 | ## Bears
 55 | 
 56 | ::picture-and-text
 57 | ---
 58 | card: true
 59 | ---
 60 | **Bears** are dangerous to humans due to their immense strength and powerful claws, which can cause severe injuries or death. Additionally, bears are highly protective of their young and can become aggressive if they feel threatened or surprised.
 61 | 
 62 | #image
 63 | ![Bears](https://picsum.photos/id/1020/800/400){.rounded-lg height="400" width="800"}
 64 | ::
 65 | 
 66 | ## Great White Shark
 67 | 
 68 | ::picture-and-text
 69 | ---
 70 | card: true
 71 | ---
 72 | As the apex predator of the ocean, the **great white shark** strikes fear into the hearts of beachgoers and surfers around the world. With its razor-sharp teeth and lightning-fast attacks, this formidable predator is the stuff of nightmares for many.
 73 | 
 74 | #image
 75 | ![sea](https://picsum.photos/id/124/800/400){.rounded-lg height="400" width="800"}
 76 | ::
 77 | 
 78 | ## Mosquito
 79 | 
 80 | ::picture-and-text
 81 | ---
 82 | card: true
 83 | ---
 84 | While tiny in size, the **mosquito** is responsible for more human deaths than any other creature on Earth. As carriers of deadly diseases such as malaria, dengue fever, and Zika virus, these blood-sucking insects pose a significant threat to public health worldwide.
 85 | 
 86 | #image
 87 | ![human](https://picsum.photos/id/996/800/400){.rounded-lg height="400" width="800"}
 88 | ::
 89 | 
 90 | ## Golden Poison Frog
 91 | 
 92 | ::picture-and-text
 93 | ---
 94 | card: true
 95 | ---
 96 | The **Golden Poison Frog**, native to the rainforests of Colombia, is considered one of the most toxic amphibians on the planet. Despite its vibrant golden coloration, this frog secretes potent neurotoxins through its skin, which can cause severe reactions or even death if ingested or handled improperly. Its toxicity serves as a defense mechanism against predators, making it one of the most dangerous frogs in the world.
 97 | 
 98 | #image
 99 | ![marsh](https://picsum.photos/id/128/800/400){.rounded-lg height="400" width="800"}
100 | ::
101 | 
102 | ## King Cobra
103 | 
104 | ::picture-and-text
105 | ---
106 | card: true
107 | ---
108 | As the largest venomous snake in the world, the **king cobra** commands respect wherever it is found. With its deadly venom and impressive size, this iconic serpent is a top predator in its habitat and a formidable adversary for any would-be threat.
109 | 
110 | #image
111 | ![desert](https://picsum.photos/id/196/800/400){.rounded-lg height="400" width="800"}
112 | ::
113 | 
114 | ## Jaguars
115 | 
116 | ::picture-and-text
117 | ---
118 | card: true
119 | ---
120 | **Jaguars** are dangerous to humans due to their powerful bite, capable of crushing skulls, and their aggressive territorial defense, especially if they feel threatened. Their stealth, agility, and adaptability to various environments further increase the risk of unexpected encounters.
121 | 
122 | #image
123 | ![Jaguars](https://picsum.photos/id/219/800/400){.rounded-lg height="400" width="800"}
124 | ::
125 | 
126 | ## Humans
127 | 
128 | ::picture-and-text
129 | ---
130 | card: true
131 | ---
132 | While not traditionally viewed as a "wild" creature, **humans** have proven to be the most dangerous and destructive force on Earth. From habitat destruction to pollution, overhunting, and warfare, humans have caused irreparable harm to countless species and ecosystems, threatening the very survival of life on our planet.
133 | 
134 | In conclusion, while the natural world is filled with creatures of all shapes and sizes, it is ultimately humans who pose the greatest threat to our own survival and the delicate balance of life on Earth. As stewards of our planet, it is imperative that we respect and protect the diverse array of species that call it home, lest we face the consequences of our own actions.
135 | 
136 | #image
137 | ![humans](https://picsum.photos/id/978/800/800){.rounded-lg height="800" width="800"}
138 | ::
139 | 


--------------------------------------------------------------------------------
/content/3.blog/6.cryptocurrencies.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: The Rise of Cryptocurrencies
  3 | description: Transforming Finance and Economy
  4 | image:
  5 |   src: https://picsum.photos/id/1048/640/360
  6 | authors:
  7 |   - name: Emily pasek
  8 |     to: https://twitter.com/benjamincanac
  9 |     avatar:
 10 |       src: https://i.pravatar.cc/128?u=5
 11 | date: 2024-02-01
 12 | badge:
 13 |   label: Economy, Information Technology
 14 | ---
 15 | 
 16 | In recent years, cryptocurrencies have emerged as a disruptive force in the world of finance and economics. Born out of the decentralized ethos of blockchain technology, cryptocurrencies have challenged traditional financial systems, offering new avenues for investment, transactions, and economic empowerment. This article explores the impact of cryptocurrencies on the economy and finance, examining their evolution, opportunities, and challenges.
 17 | 
 18 | ![computer](https://picsum.photos/id/3/1000/600){.rounded-lg height="600" width="1000"}
 19 | 
 20 | ## The Evolution of Cryptocurrencies
 21 | 
 22 | Bitcoin, introduced in 2009 by the pseudonymous Satoshi Nakamoto, marked the birth of cryptocurrencies. Initially met with skepticism, Bitcoin gradually gained traction, attracting attention from investors and technologists alike. Its underlying blockchain technology, a distributed ledger system, offered transparency, security, and immutability, laying the foundation for a new financial paradigm.
 23 | 
 24 | Since then, thousands of cryptocurrencies, including Ethereum, Ripple, and Litecoin, have proliferated, each with its unique features and use cases. Ethereum introduced smart contracts, enabling programmable transactions, while Ripple focused on facilitating cross-border payments. These diverse offerings have expanded the scope of cryptocurrencies, fueling innovation and experimentation in the financial sector.
 25 | 
 26 | ## 📈 Opportunities in Cryptocurrencies
 27 | 
 28 | Cryptocurrencies present numerous opportunities for individuals, businesses, and economies:
 29 | 
 30 | - **Financial Inclusion:** Cryptocurrencies offer financial services to the unbanked and underbanked populations, bypassing traditional banking infrastructure and reducing transaction costs.
 31 | - **Decentralized Finance (DeFi):** DeFi platforms leverage blockchain technology to provide decentralized alternatives to traditional financial services, including lending, borrowing, and trading, without intermediaries.
 32 | - **Investment Diversification:** Cryptocurrencies serve as a hedge against traditional assets, providing diversification benefits and offering exposure to a nascent asset class with high growth potential.
 33 | - **Technological Innovation:** The underlying blockchain technology of cryptocurrencies has applications beyond finance, including supply chain management, healthcare, and voting systems, driving innovation across industries.
 34 | 
 35 | ## 📉 Challenges and Risks
 36 | 
 37 | Despite their potential, cryptocurrencies also face challenges and risks that warrant attention:
 38 | 
 39 | - **Volatility:** Cryptocurrency markets are characterized by high volatility, subject to speculative trading, market manipulation, and sudden price fluctuations, posing risks to investors and stability.
 40 | - **Regulatory Uncertainty:** Governments and regulatory bodies worldwide are grappling with the regulation of cryptocurrencies, raising concerns about legal compliance, taxation, and investor protection.
 41 | - **Security Concerns:** Cryptocurrency exchanges and wallets are vulnerable to cyber attacks, theft, and fraud, necessitating robust security measures and risk management practices.
 42 | - **Environmental Impact:** The energy-intensive mining process of cryptocurrencies, particularly Bitcoin, raises environmental concerns due to its carbon footprint and energy consumption.
 43 | 
 44 | ## Here are the most well-known cryptocurrencies
 45 | 
 46 | These cryptocurrencies are among the most recognized and widely used in the cryptocurrency ecosystem, each with its unique features and use cases.
 47 | 
 48 | ::card-group
 49 |   :::card
 50 |   ---
 51 |   icon: i-simple-icons-bitcoin
 52 |   target: _blank
 53 |   title: Bitcoin (BTC)
 54 |   to: https://bitcoin.org/
 55 |   ---
 56 |   The first and most famous cryptocurrency, often considered a digital store of value and widely used as a medium of exchange.
 57 |   :::
 58 | 
 59 |   :::card
 60 |   ---
 61 |   icon: i-simple-icons-ethereum
 62 |   target: _blank
 63 |   title: Ethereum (ETH)
 64 |   to: https://ethereum.org
 65 |   ---
 66 |   A blockchain platform enabling developers to create smart contracts and decentralized applications (DApps).
 67 |   :::
 68 | 
 69 |   :::card
 70 |   ---
 71 |   icon: i-simple-icons-ripple
 72 |   target: _blank
 73 |   title: Ripple (XRP)
 74 |   to: https://ripple.com/
 75 |   ---
 76 |   Focused on providing fast and inexpensive global payment solutions, especially for interbank transactions and cross-border payments.
 77 |   :::
 78 | 
 79 |   :::card
 80 |   ---
 81 |   icon: i-simple-icons-litecoin
 82 |   target: _blank
 83 |   title: Litecoin (LTC)
 84 |   to: https://litecoin.com//
 85 |   ---
 86 |   Known for faster transaction times and a more decentralized approach compared to Bitcoin.
 87 |   :::
 88 | 
 89 |   :::card
 90 |   ---
 91 |   icon: i-simple-icons-bitcoincash
 92 |   target: _blank
 93 |   title: Bitcoin Cash (BCH)
 94 |   to: https://bitcoincash.org
 95 |   ---
 96 |   A fork of Bitcoin aimed at improving scalability and transaction processing capabilities.
 97 |   :::
 98 | 
 99 |   :::card
100 |   ---
101 |   icon: i-simple-icons-cardano
102 |   target: _blank
103 |   title: Cardano (ADA)
104 |   to: https://cardano.org/
105 |   ---
106 |   A blockchain platform designed for enhanced security and scalability, supporting smart contract and DApp development.
107 |   :::
108 | ::
109 | 
110 | ## Conclusion
111 | 
112 | Cryptocurrencies have emerged as a transformative force in the economy and finance, offering opportunities for innovation, inclusion, and investment. However, their adoption and integration into mainstream financial systems require addressing regulatory, security, and scalability challenges. As cryptocurrencies continue to evolve, their impact on the global economy will be shaped by technological advancements, regulatory developments, and market dynamics, paving the way for a decentralized and digitized financial future.
113 | 


--------------------------------------------------------------------------------
/content/1.docs/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 `<sup>` and `<sub>` tags.
 63 | 
 64 | | Style       | How to use               | Result      |
 65 | | ----------- | ------------------------ | ----------- |
 66 | | Superscript | `<sup>superscript</sup>` | superscript |
 67 | | Subscript   | `<sub>subscript</sub>`   | 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/0.index.yml:
--------------------------------------------------------------------------------
  1 | title: Ship Your [SaaS]{class="text-primary"} at light speed
  2 | description: Build production-ready SaaS applications with Nuxt UI's powerful components, authentication flows, and enterprise features. The same component library trusted by the entire Nuxt ecosystem.
  3 | seo:
  4 |   title: Nuxt UI SaaS Template
  5 |   description: Create stunning, fast and production-ready SaaS applications with Nuxt UI. 100+ Vue components, authentication, dark mode, and enterprise features built on Tailwind CSS.
  6 | navigation: false
  7 | hero:
  8 |   links:
  9 |     - label: Get started
 10 |       icon: i-lucide-arrow-right
 11 |       trailing: true
 12 |       to: https://ui.nuxt.com/docs/getting-started/installation/nuxt
 13 |       target: _blank
 14 |       size: xl
 15 |     - label: Use this template
 16 |       icon: i-simple-icons-github
 17 |       size: xl
 18 |       color: neutral
 19 |       variant: subtle
 20 |       to: https://github.com/nuxt-ui-templates/saas
 21 |       target: _blank
 22 | sections:
 23 |   - title: Powered by Nuxt UI Components
 24 |     description: Access the complete Nuxt UI component library with 100+ beautifully styled, accessible, and customizable Vue components. Everything you need to build professional SaaS applications.
 25 |     id: features
 26 |     orientation: horizontal
 27 |     features:
 28 |       - name: 100+ UI Components
 29 |         description: From buttons to modals, data tables to forms - all styled with Tailwind CSS and accessible out of the box.
 30 |         icon: i-lucide-package
 31 |       - name: Authentication Ready
 32 |         description: Pre-built login, signup, and password reset flows. Just connect your backend and start onboarding users.
 33 |         icon: i-lucide-shield
 34 |       - name: TypeScript First
 35 |         description: Full TypeScript support with auto-completion, type safety, and IntelliSense for every component and composable.
 36 |         icon: i-lucide-code-2
 37 |   - title: Built for Modern SaaS
 38 |     description: Everything you need to launch and scale your SaaS. From beautiful marketing pages to complex dashboards, ship faster with production-ready patterns.
 39 |     orientation: horizontal
 40 |     reverse: true
 41 |     features:
 42 |       - name: Edge Performance
 43 |         description: Optimized for Core Web Vitals with automatic code splitting, lazy loading, and SSR/SSG support.
 44 |         icon: i-lucide-zap
 45 |       - name: Dark Mode Ready
 46 |         description: Automatic theme switching with smooth transitions. Respects system preferences and remembers user choice.
 47 |         icon: i-lucide-moon
 48 |       - name: Global Ready
 49 |         description: Built-in i18n support for 50+ languages with RTL/LTR layouts and @nuxt/fonts integration.
 50 |         icon: i-lucide-globe
 51 | features:
 52 |   title: Everything You Need to Ship
 53 |   description: Stop building from scratch. Focus on your unique features while Nuxt UI handles the foundations with battle-tested components and patterns.
 54 |   items:
 55 |     - title: Beautiful Design System
 56 |       description: Semantic color aliases, comprehensive design tokens, and Tailwind Variants for consistent, customizable styling.
 57 |       icon: i-lucide-palette
 58 |     - title: Accessible by Default
 59 |       description: Built on Reka UI for robust accessibility. WCAG compliant components that work for everyone, everywhere.
 60 |       icon: i-lucide-accessibility
 61 |     - title: Developer Experience
 62 |       description: Auto-imports, hot module replacement, and comprehensive documentation. Build faster with less friction.
 63 |       icon: i-lucide-terminal
 64 |     - title: SEO Optimized
 65 |       description: Server-side rendering, automatic meta tags, sitemap generation, and Open Graph images out of the box.
 66 |       icon: i-lucide-search
 67 |     - title: Production Ready
 68 |       description: Error handling, loading states, form validation, and security best practices built into every component.
 69 |       icon: i-lucide-check-circle
 70 |     - title: Infinitely Customizable
 71 |       description: Override any style with the ui prop, customize globally with AppConfig, or use Tailwind classes directly.
 72 |       icon: i-lucide-settings
 73 | testimonials:
 74 |   headline: Trusted by Developers
 75 |   title: Join Thousands Building with Nuxt UI
 76 |   description: See why developers choose Nuxt UI to ship their SaaS applications faster and with more confidence.
 77 |   items:
 78 |     - quote: Nuxt UI transformed how we build. The component quality is exceptional - everything just works with perfect TypeScript support, accessibility, and dark mode built in.
 79 |       user:
 80 |         name: Sarah Chen
 81 |         description: CTO at TechScale Solutions
 82 |         avatar:
 83 |           src: https://i.pravatar.cc/120?img=1
 84 |     - quote: We shipped our MVP in 2 weeks instead of 2 months. The authentication flows and form components saved us countless hours of development time.
 85 |       user:
 86 |         name: Marcus Rodriguez
 87 |         description: VP of Engineering at DataFlow
 88 |         avatar:
 89 |           src: https://i.pravatar.cc/120?img=7
 90 |     - quote: The design system with AppConfig is brilliant. We maintain brand consistency across all our products while leveraging the full component library.
 91 |       user:
 92 |         name: David Kumar
 93 |         description: Security Director at SecureStack
 94 |         avatar:
 95 |           src: https://i.pravatar.cc/120?img=3
 96 |     - quote: Perfect Lighthouse scores out of the box. Our Core Web Vitals improved dramatically just by switching to Nuxt UI components.
 97 |       user:
 98 |         name: Emily Zhang
 99 |         description: Lead Architect at ScaleForce
100 |         avatar:
101 |           src: https://i.pravatar.cc/120?img=5
102 |     - quote: The Tailwind Variants system makes customization so intuitive. We can override any component style while keeping the functionality intact.
103 |       user:
104 |         name: James Wilson
105 |         description: DevOps Lead at CloudPro
106 |         avatar:
107 |           src: https://i.pravatar.cc/120?img=8
108 |     - quote: From the SaaS template to production in days. The pre-built layouts, navigation, and content structure accelerated our launch.
109 |       user:
110 |         name: Lisa Patel
111 |         description: CEO at AutoScale
112 |         avatar:
113 |           src: https://i.pravatar.cc/120?img=9
114 |     - quote: Reka UI foundation means accessibility is never an afterthought. We achieved WCAG compliance without any custom work.
115 |       user:
116 |         name: Michael Torres
117 |         description: Frontend Lead at AccessFirst
118 |         avatar:
119 |           src: https://i.pravatar.cc/120?img=11
120 |     - quote: The documentation is outstanding. Every component has clear examples, and the community on Discord is incredibly helpful.
121 |       user:
122 |         name: Rachel Kim
123 |         description: Performance Engineer at APIHub
124 |         avatar:
125 |           src: https://i.pravatar.cc/120?img=10
126 |     - quote: We replaced three different UI libraries with Nuxt UI. The consistency and quality across all components is unmatched.
127 |       user:
128 |         name: Thomas Weber
129 |         description: UI Architecture Lead at DesignScale
130 |         avatar:
131 |           src: https://i.pravatar.cc/120?img=12
132 |     - quote: The integration with Nuxt modules is seamless. Color mode, fonts, icons - everything works together perfectly.
133 |       user:
134 |         name: Sophia Martinez
135 |         description: Integration Specialist at TechFlow
136 |         avatar:
137 |           src: https://i.pravatar.cc/120?img=14
138 | cta:
139 |   title: Ready to build an amazing SaaS?
140 |   description: Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today.
141 |   links:
142 |     - label: Start building
143 |       to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt'
144 |       target: _blank
145 |       trailingIcon: i-lucide-arrow-right
146 |     - label: View on GitHub
147 |       to: 'https://github.com/nuxt-ui-templates/saas'
148 |       target: _blank
149 |       variant: subtle
150 |       icon: i-simple-icons-github
151 | 


--------------------------------------------------------------------------------
/content/1.docs/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 |   <template>
230 |     <UApp>
231 |       <NuxtPage />
232 |     </UApp>
233 |   </template>
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/3.blog/1.asian-cuisine.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Exploring the Culinary Wonders of Asia
  3 | description: "Embark on a tantalizing expedition through the diverse and
  4 |   enchanting flavors of Asia "
  5 | image:
  6 |   src: https://picsum.photos/id/490/640/360
  7 | authors:
  8 |   - name: Alexia wong
  9 |     to: https://twitter.com/benjamincanac
 10 |     avatar:
 11 |       src: https://i.pravatar.cc/128?u=0
 12 | date: 2023-08-25
 13 | badge:
 14 |   label: Cooking
 15 | ---
 16 | 
 17 | ## Introduction to the Enchanting World of Asian Cuisine
 18 | 
 19 | Dive into the rich tapestry of Asian cuisine, a journey through centuries-old traditions and a symphony of flavors that tantalize the taste buds. From the bustling street markets of Bangkok to the serene tea houses of Kyoto, each corner of Asia offers a culinary adventure waiting to be explored. In this chapter, we embark on a quest to understand what makes Asian cuisine truly extraordinary.
 20 | 
 21 | Asia's culinary landscape is as diverse as its cultures. Chinese, Japanese, Thai, Indian, Vietnamese, Malaysian – each region boasts its own unique culinary identity. The use of fresh, locally sourced ingredients, a delicate balance of spices, and a reverence for tradition are the common threads that bind these diverse cuisines.
 22 | 
 23 | ::pictures
 24 |   :::div
 25 |   ![grappes](https://picsum.photos/id/75/400/400){.rounded-lg height="400" width="400"}
 26 |   :::
 27 | 
 28 |   :::div
 29 |   ![sakura](https://picsum.photos/id/82/400/400){.rounded-lg height="400" width="400"}
 30 |   :::
 31 | 
 32 |   :::div
 33 |   ![raspberry](https://picsum.photos/id/102/400/400){.rounded-lg height="400" width="400"}
 34 |   :::
 35 | ::
 36 | 
 37 | ## Unraveling the Secrets of Asian Flavors and Techniques
 38 | 
 39 | The heart of Asian cuisine lies in its distinct flavors and time-honored cooking techniques. Take a journey through the spice-laden streets of Sichuan in China, where the fiery heat of the wok creates mouthwatering masterpieces. Learn the art of sushi making in Japan, where precision and presentation are paramount. Delve into the aromatic world of Thai curries, where the interplay of sweet, sour, salty, and spicy creates a dance of flavors on the palate.
 40 | 
 41 | Asian kitchens are a treasure trove of ingredients, each with its own story. Soy sauce, miso, coconut milk, lemongrass, and an array of exotic spices elevate dishes to new heights. Discover the magic of umami, the elusive fifth taste that defines many Asian dishes, leaving a lingering and savory sensation.
 42 | 
 43 | ::pictures
 44 |   :::div
 45 |   ![wheat](https://picsum.photos/id/107/400/400){.rounded-lg height="400" width="400"}
 46 |   :::
 47 | 
 48 |   :::div
 49 |   ![tea](https://picsum.photos/id/225/400/400){.rounded-lg height="400" width="400"}
 50 |   :::
 51 | 
 52 |   :::div
 53 |   ![nenuphar](https://picsum.photos/id/306/400/400){.rounded-lg height="400" width="400"}
 54 |   :::
 55 | 
 56 |   :::div
 57 |   ![flowers](https://picsum.photos/id/488/400/400){.rounded-lg height="400" width="400"}
 58 |   :::
 59 | 
 60 |   :::div
 61 |   ![yuzu](https://picsum.photos/id/326/400/400){.rounded-lg height="400" width="400"}
 62 |   :::
 63 | 
 64 |   :::div
 65 |   ![strawberry](https://picsum.photos/id/493/400/400){.rounded-lg height="400" width="400"}
 66 |   :::
 67 | ::
 68 | 
 69 | ## Some Cooking Recipe
 70 | 
 71 | ### Salmon Avocado Sushi Rolls (Japan 🇯🇵)
 72 | 
 73 | ![fish](https://picsum.photos/id/615/1200/400){.rounded-lg height="400" width="1200"}
 74 | 
 75 | ::tabs
 76 |   :::div{icon="i-lucide-flame" label="Ingredients"}
 77 |   - 2 cups sushi rice, cooked and seasoned with
 78 |     :br
 79 |     rice vinegar, sugar, and salt
 80 |   - 10 sheets nori (seaweed)
 81 |   - 1/2 lb fresh sushi-grade salmon, thinly sliced
 82 |   - 1 ripe avocado, sliced
 83 |   - 1 cucumber, julienned
 84 |   - Soy sauce, pickled ginger, and wasabi for serving
 85 |   :::
 86 | 
 87 |   :::div{icon="i-lucide-list" label="Instructions"}
 88 |   - **Prepare Sushi Rice:**
 89 |     Cook sushi rice according to package instructions. Once cooked, season with a mixture of rice vinegar, sugar, and salt. Allow it to cool.
 90 |   - **Prepare Ingredients:**
 91 |     Slice the salmon into thin strips.
 92 |     Slice the avocado and julienne the cucumber.
 93 |   - **Assemble Sushi Roll:**
 94 |     Place a sheet of nori on the bamboo sushi rolling mat, shiny side down.
 95 |     Wet your hands to prevent sticking and spread a thin layer of sushi rice on the nori, leaving a small border at the top.
 96 |     Add Filling:
 97 |     Arrange slices of salmon, avocado, and julienned cucumber in the center of the rice.
 98 |   - **Roll the Sushi:**
 99 |     Using the bamboo mat, start rolling the sushi away from you, applying gentle pressure to create a tight roll.
100 |     Moisten the top border of the nori with a little water to seal the roll.
101 |   - **Slice the Roll:**
102 |     With a sharp, wet knife, slice the roll into bite-sized pieces.
103 |   - **Serve:**
104 |     Arrange the sushi rolls on a plate.
105 |     Serve with soy sauce, pickled ginger, and wasabi on the side.
106 |   - **Enjoy:**
107 |     Pick up a slice of sushi with chopsticks, dip it in soy sauce, and savor the delicious combination of fresh salmon, creamy avocado, and crunchy cucumber.
108 |   :::
109 | ::
110 | 
111 | ### Nems/Cha Gio (Vietnam 🇻🇳)
112 | 
113 | ![kitchen boat](https://picsum.photos/id/686/1200/400){.rounded-lg height="400" width="1200"}
114 | 
115 | ::tabs
116 |   :::div
117 |   ---
118 |   class: flex space-between w-full items-center
119 |   icon: i-lucide-flame
120 |   label: Ingredients
121 |   ---
122 |   - 1/2 lb (about 225g) ground pork
123 |   - 1 cup finely shredded carrots
124 |   - 1 cup bean sprouts
125 |   - 1 cup finely chopped wood ear mushrooms (soaked and softened if dried)
126 |   - 1 cup thin rice vermicelli noodles (cooked according to package instructions)
127 |   - 2 cloves garlic, minced
128 |   - 1 shallot, minced
129 |   - 1 tablespoon fish sauce
130 |   - 1 teaspoon sugar
131 |   - 1/2 teaspoon black pepper
132 |   - 2 tablespoons vegetable oil for stir-frying
133 |   :::
134 | 
135 |   :::div{icon="i-lucide-list" label="Instructions"}
136 |   - **Prepare the Filling:**
137 |     In a pan, heat 2 tablespoons of vegetable oil. Add minced garlic and shallots, stir-frying until fragrant.
138 |     Add ground pork and cook until browned. Add fish sauce, sugar, and black pepper.
139 |     Add shredded carrots, bean sprouts, wood ear mushrooms, and cooked rice vermicelli. Stir-fry until vegetables are slightly softened. Remove from heat and let it cool.
140 |   - **Soak Rice Paper:**
141 |     Dip one rice paper sheet into warm water for a few seconds until it becomes pliable. Place it on a clean, damp cloth.
142 |   - **Roll the Spring Rolls:**
143 |     Place a generous spoonful of the filling on the lower third of the rice paper.
144 |     Fold the sides of the rice paper over the filling and then roll it up tightly from the bottom to the top.
145 |   - **Seal and Repeat:**
146 |     Seal the edges by moistening with water. Repeat until all the filling is used.
147 |   - **Deep Fry:**
148 |     Heat vegetable oil in a deep fryer or a deep pan to 350°F (180°C).
149 |     Fry the spring rolls until golden brown and crispy. Drain on paper towels.
150 |   - **Prepare Dipping Sauce:**
151 |     Mix fish sauce, water, sugar, lime juice, minced garlic, and chopped chili (if using). Stir until sugar is dissolved.
152 |   - **Serve:**
153 |     Serve the Vietnamese Spring Rolls with the dipping sauce and garnish with shredded carrots.
154 |   - **Enjoy:**
155 |     Enjoy these crispy and flavorful Vietnamese Spring Rolls as an appetizer or a snack.
156 |   :::
157 | ::
158 | 
159 | ### Bibimbap (South Korean 🇰🇷)
160 | 
161 | ![bibimbap](https://picsum.photos/id/292/1200/400){.rounded-lg height="400" width="1200"}
162 | 
163 | ::tabs
164 |   :::div
165 |   ---
166 |   class: flex space-between w-full items-center
167 |   icon: i-lucide-flame
168 |   label: Ingredients
169 |   ---
170 |   - 2 cups cooked short-grain rice
171 |   - 1 cup assorted vegetables (such as carrots, spinach, mushrooms, zucchini, bean sprouts)
172 |   - 1 cup protein (such as thinly sliced beef, chicken, or tofu)
173 |   - 2 tablespoons vegetable oil
174 |   - 2 cloves garlic, minced
175 |   - Salt, to taste
176 |   - Soy sauce, to taste
177 |   - Sesame oil, to taste
178 |   - Gochujang (Korean red chili paste), to taste
179 |   - Toasted sesame seeds, for garnish
180 |   - Fried eggs (optional), for topping
181 |   :::
182 | 
183 |   :::div{icon="i-lucide-list" label="Instructions"}
184 |   - **Cook the Rice:**
185 |     Prepare 2 cups of short-grain rice according to package instructions.
186 |     Set aside once cooked.
187 |   - **Prepare the Vegetables:**
188 |     Slice assorted vegetables thinly (carrots, spinach, mushrooms, zucchini, bean sprouts).
189 |     Blanch or stir-fry the vegetables separately or together, seasoning with salt and soy sauce to taste.
190 |     Set aside.
191 |   - **Cook the Protein (Optional):**
192 |     Thinly slice your choice of protein (beef, chicken, or tofu) against the grain.
193 |     Heat 1 tablespoon of vegetable oil in a skillet over medium-high heat.
194 |     Add minced garlic and cook until fragrant (about 30 seconds).
195 |     Add the sliced meat and cook until browned and cooked through.
196 |     Season with salt and soy sauce to taste.
197 |     Set aside.
198 |   - **Assemble the Bibimbap:**
199 |     Divide the cooked rice among serving bowls.
200 |     Arrange the cooked vegetables and protein on top of the rice in separate sections.
201 |   - **Add Flavorings:**
202 |     Drizzle each bowl with sesame oil and gochujang, adjusting the amount to taste.
203 |   - **Garnish and Serve:**
204 |     Sprinkle toasted sesame seeds over the top of each bowl.
205 |     Optionally, top each bowl with a fried egg.
206 |   - **Enjoy:**
207 |     Serve the Bibimbap immediately.
208 |     Mix everything together just before eating for the best flavor experience.
209 |   :::
210 | ::
211 | 
212 | ### Cheese Naan (India 🇮🇳)
213 | 
214 | ![Naan](https://picsum.photos/id/999/1200/400){.rounded-lg height="400" width="1200"}
215 | 
216 | ::tabs
217 |   :::div{icon="i-lucide-flame" label="Ingredients"}
218 |   - 2 1/4 teaspoons (1 packet) active dry yeast
219 |   - 1 teaspoon sugar
220 |   - 3/4 cup warm water (about 110°F or 43°C)
221 |   - 2 cups all-purpose flour, plus extra for rolling
222 |   - 1 teaspoon salt
223 |   - 1/4 teaspoon baking soda
224 |   - 1/4 cup plain yogurt
225 |   - 1 tablespoon olive oil or melted ghee
226 |   :::
227 | 
228 |   :::div{icon="i-lucide-list" label="Instructions"}
229 |   - **Activate the Yeast:**
230 |     In a small bowl, combine the active dry yeast, sugar, and warm water. Let it sit for about 5-10 minutes until it becomes frothy.
231 |   - **Prepare the Dough:**
232 |     In a large mixing bowl, combine the flour, salt, and baking soda.
233 |     Make a well in the center and add the activated yeast mixture, yogurt, and olive oil.
234 |     Mix the ingredients until a dough forms.
235 |   - **Knead the Dough:**
236 |     Transfer the dough to a floured surface and knead for about 5-7 minutes until it becomes smooth and elastic.
237 |   - **Let it Rise:**
238 |     Place the dough in a lightly oiled bowl, cover it with a damp cloth, and let it rise in a warm place for 1-2 hours or until it has doubled in size.
239 |   - **Preheat the Oven:**
240 |     Preheat your oven to the highest setting, usually around 500°F (260°C). If you have a pizza stone, place it in the oven to heat.
241 |   - **Divide and Shape:**
242 |     Divide the dough into equal portions and shape each portion into a ball.
243 |     Roll out each ball into an oval or round shape, about 1/4 inch thick.
244 |   - **Bake:**
245 |     If using a pizza stone, transfer the rolled-out naan directly onto the stone in the preheated oven. Alternatively, place the rolled-out naan on a baking sheet.
246 |     Bake for 5-7 minutes or until the naan puffs up and the edges turn golden brown.
247 |   - **Optional Toppings:**
248 |     Brush the hot naan with melted ghee or butter and sprinkle with chopped fresh cilantro if desired.
249 |   - **Serve:**
250 |     Serve the naan warm, either as a side to your favorite curry or as a delicious flatbread.
251 |   :::
252 | ::
253 | 


--------------------------------------------------------------------------------
/content/1.docs/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 `<NuxtLink>` 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 | :kbd{value="meta"} :kbd{value="K"}
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 | 


--------------------------------------------------------------------------------