first commit
This commit is contained in:
1
docs/content/3.essentials/.navigation.yml
Normal file
1
docs/content/3.essentials/.navigation.yml
Normal file
@ -0,0 +1 @@
|
||||
title: Essentials
|
||||
223
docs/content/3.essentials/1.markdown-syntax.md
Normal file
223
docs/content/3.essentials/1.markdown-syntax.md
Normal file
@ -0,0 +1,223 @@
|
||||
---
|
||||
title: Markdown Syntax
|
||||
description: Text, title, and styling in standard markdown.
|
||||
navigation:
|
||||
icon: i-lucide-heading-1
|
||||
---
|
||||
|
||||
## Titles
|
||||
|
||||
Use titles to introduce main sections. They structure your documentation and help users navigate content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
## Titles
|
||||
|
||||
#code
|
||||
```mdc
|
||||
## Titles
|
||||
```
|
||||
::
|
||||
|
||||
### Subtitles
|
||||
|
||||
Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
### Subtitles
|
||||
|
||||
#code
|
||||
```mdc
|
||||
### Subtitles
|
||||
```
|
||||
::
|
||||
|
||||
::tip
|
||||
Each title and subtitle creates an anchor and shows up automatically in the table of contents.
|
||||
::
|
||||
|
||||
## Text Formatting
|
||||
|
||||
Docus supports most Markdown formatting options.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ------ | ------------ | ---------- |
|
||||
| Bold | `**bold**` | **Bold** |
|
||||
| Italic | `*italic*` | *Italic* |
|
||||
| Strike | `~~strike~~` | ~~Strike~~ |
|
||||
|
||||
Combine formatting for richer text styles and visual emphasis.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ------------- | ------------------- | ----------------- |
|
||||
| Bold Italic | `**_bold italic_**` | ***Bold Italic*** |
|
||||
| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ |
|
||||
| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ |
|
||||
|
||||
## Links
|
||||
|
||||
Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
|
||||
To create a link, wrap the link text in brackets `[]()`.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
|
||||
|
||||
#code
|
||||
```mdc
|
||||
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
|
||||
```
|
||||
::
|
||||
|
||||
### Internal links
|
||||
|
||||
For linking within your documentation, use root-relative paths like `/getting-started/installation`.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
[Installation](/getting-started/installation)
|
||||
|
||||
#code
|
||||
```mdc
|
||||
[Installation](/getting-started/installation)
|
||||
```
|
||||
::
|
||||
|
||||
## Lists
|
||||
|
||||
Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
|
||||
|
||||
### Unordered
|
||||
|
||||
Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
- I'm a list item.
|
||||
- I'm another list item.
|
||||
- I'm the last list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
- I'm a list item.
|
||||
- I'm another list item.
|
||||
- I'm the last list item.
|
||||
```
|
||||
::
|
||||
|
||||
### Ordered
|
||||
|
||||
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
1. I'm a list item.
|
||||
2. I'm another list item.
|
||||
3. I'm the last list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
1. I'm a list item.
|
||||
2. I'm another list item.
|
||||
3. I'm the last list item.
|
||||
```
|
||||
::
|
||||
|
||||
### Nested
|
||||
|
||||
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
- I'm a list item.
|
||||
- I'm a nested list item.
|
||||
- I'm another nested list item.
|
||||
- I'm another list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
- I'm a list item.
|
||||
- I'm a nested list item.
|
||||
- I'm another nested list item.
|
||||
- I'm another list item.
|
||||
```
|
||||
::
|
||||
|
||||
## Tables
|
||||
|
||||
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
|
||||
#code
|
||||
```mdc
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
```
|
||||
::
|
||||
|
||||
## Blockquotes
|
||||
|
||||
Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
|
||||
|
||||
### Singleline
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
```
|
||||
::
|
||||
|
||||
### Multiline
|
||||
|
||||
Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
>
|
||||
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
>
|
||||
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
|
||||
```
|
||||
::
|
||||
396
docs/content/3.essentials/2.code-blocks.md
Normal file
396
docs/content/3.essentials/2.code-blocks.md
Normal file
@ -0,0 +1,396 @@
|
||||
---
|
||||
title: Code Blocks
|
||||
description: Display inline code and code blocks in your documentation.
|
||||
navigation:
|
||||
icon: i-lucide-code-xml
|
||||
---
|
||||
|
||||
## Basic
|
||||
|
||||
### Inline Code
|
||||
|
||||
Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
::
|
||||
|
||||
### Code Blocks
|
||||
|
||||
Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
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.
|
||||
Filenames help users understand the code's location and purpose within a project.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
||||
|
||||
::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
|
||||
Icons are already defined by default, but you can customize them in your `app.config.ts`:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
uiPro: {
|
||||
prose: {
|
||||
codeIcon: {
|
||||
terminal: 'i-ph-terminal-window-duotone'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## Advanced
|
||||
|
||||
### CodeGroup
|
||||
|
||||
Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::code-group{.w-full}
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui-pro@next
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
:::code-group
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### CodeTree
|
||||
|
||||
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
|
||||
|
||||
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
|
||||
:::code-tree{default-value="app/app.config.ts"}
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
```css [app/assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
```ts [app/app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'sky',
|
||||
colors: 'slate'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```vue [app/app.vue]
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint --fix ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.18",
|
||||
"@nuxt/ui-pro": "3.0.0-alpha.10",
|
||||
"nuxt": "^3.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "9.20.1",
|
||||
"typescript": "^5.7.2",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json [tsconfig.json]
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
```
|
||||
|
||||
````md [README.md]
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
````
|
||||
:::
|
||||
::
|
||||
|
||||
### `CodePreview`
|
||||
|
||||
Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
|
||||
Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
label: Preview
|
||||
---
|
||||
:::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::code-preview
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `CodeCollapse`
|
||||
|
||||
Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::code-collapse{class="[&>div]:my-0"}
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::code-collapse
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
424
docs/content/3.essentials/3.components.md
Normal file
424
docs/content/3.essentials/3.components.md
Normal file
@ -0,0 +1,424 @@
|
||||
---
|
||||
title: Markdown Components
|
||||
description: Use Markdown components to help you structure your content, with
|
||||
the help of Nuxt UI Pro.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
title: Components
|
||||
---
|
||||
|
||||
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
|
||||
|
||||
**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
|
||||
|
||||
::prose-note{to="https://ui.nuxt.com/getting-started"}
|
||||
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
|
||||
::
|
||||
|
||||
### `Accordion`
|
||||
|
||||
Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
::::accordion
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What is Docus and what are its key features??
|
||||
---
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::::
|
||||
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: How do I get started with Docus?
|
||||
---
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::::
|
||||
|
||||
:::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Badge`
|
||||
|
||||
Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::badge
|
||||
**v3.0.0**
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0**
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Callout`
|
||||
|
||||
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
|
||||
|
||||
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
|
||||
|
||||
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::div{.flex.flex-col.gap-4.w-full}
|
||||
:::::note{.w-full.my-0}
|
||||
Here's some additional information for you.
|
||||
:::::
|
||||
|
||||
:::::tip{.w-full.my-0}
|
||||
Here's a helpful suggestion.
|
||||
:::::
|
||||
|
||||
:::::warning{.w-full.my-0}
|
||||
Be careful with this action as it might have unexpected results.
|
||||
:::::
|
||||
|
||||
:::::caution{.w-full.my-0}
|
||||
This action cannot be undone.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::note
|
||||
Here's some additional information.
|
||||
::
|
||||
|
||||
::tip
|
||||
Here's a helpful suggestion.
|
||||
::
|
||||
|
||||
::warning
|
||||
Be careful with this action as it might have unexpected results.
|
||||
::
|
||||
|
||||
::caution
|
||||
This action cannot be undone.
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Card` and `CardGroup`
|
||||
|
||||
Use markdown in the default slot of the `card` component to highlight your content.
|
||||
|
||||
Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
|
||||
|
||||
Wrap your `card` components with the `card-group` component to group them together in a grid layout.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::card-group{.w-full.my-0}
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: SaaS
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Docs
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Landing
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
:::card-group
|
||||
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: SaaS
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
target: _blank
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Docs
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
target: _blank
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Landing
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
target: _blank
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
::
|
||||
|
||||
:::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Collapsible`
|
||||
|
||||
Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Field` and `FieldGroup`
|
||||
|
||||
A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::field-group{.my-0}
|
||||
:::::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
:::::
|
||||
|
||||
:::::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
:::::
|
||||
|
||||
:::::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
:::::
|
||||
|
||||
:::::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::field-group
|
||||
::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
::
|
||||
|
||||
::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
::
|
||||
|
||||
::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
::
|
||||
|
||||
::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Icon`
|
||||
|
||||
Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Kbd`
|
||||
|
||||
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
|
||||
|
||||
::code-preview
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Tabs`
|
||||
|
||||
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
|
||||
|
||||
::code-preview
|
||||
:::tabs{.w-full}
|
||||
::::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::
|
||||
```
|
||||
::::
|
||||
|
||||
::::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::tabs{.w-full}
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::::
|
||||
```
|
||||
::::
|
||||
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
:::
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `Steps`
|
||||
|
||||
Wrap your headings with the Steps component to display a list of steps.
|
||||
|
||||
Use the `level` prop to define which heading will be used for the steps.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::
|
||||
````
|
||||
:::
|
||||
::
|
||||
53
docs/content/3.essentials/4.images-embeds.md
Normal file
53
docs/content/3.essentials/4.images-embeds.md
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Images and Embeds
|
||||
description: Add image, video, and other HTML elements
|
||||
navigation:
|
||||
icon: i-lucide-image
|
||||
seo:
|
||||
description: Add image, video, and other HTML elements using Docus theme
|
||||
---
|
||||
|
||||
## Markdown
|
||||
|
||||
Display images or videos using standard Markdown syntax.
|
||||
|
||||
### Images
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
Or with your local images
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
::note{to="https://image.nuxt.com/"}
|
||||
Docus will use `<NuxtImg>` component under the hood instead of the native `img` tag.
|
||||
::
|
||||
|
||||
### Videos
|
||||
|
||||
::prose-code-preview
|
||||
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
|
||||
```
|
||||
::
|
||||
|
||||
###
|
||||
Reference in New Issue
Block a user