修复导航栏滚动逻辑
This commit is contained in:
@@ -3,9 +3,7 @@
|
||||
class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<div
|
||||
class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
|
||||
<!-- Logo and Site Name -->
|
||||
<div class="h-8">
|
||||
<NuxtLink to="/" class="flex items-center space-x-3">
|
||||
@@ -39,7 +37,7 @@
|
||||
|
||||
<!-- 可滚动的导航区域 -->
|
||||
<div
|
||||
class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
|
||||
class="flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
|
||||
style="max-height: calc(100vh - 200px)"
|
||||
>
|
||||
|
||||
@@ -59,29 +57,18 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<!-- 总目录及展示页导航 -->
|
||||
<div class="flex items-center px-8 p-1">
|
||||
<ContentDirectory />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mt-4 border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
|
||||
<!-- root: 'space-y-1',
|
||||
list: 'space-y-1',
|
||||
item: '',
|
||||
listWithChildren: 'ms-4 border-s border-gray-200 dark:border-gray-700',
|
||||
itemWithChildren: 'flex flex-col',
|
||||
trigger: 'font-medium text-sm',
|
||||
link: 'group relative w-full px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200 flex items-center gap-2',
|
||||
linkLeadingIcon: 'shrink-0 size-5',
|
||||
linkTrailingIcon: 'size-4 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
|
||||
linkTitle: 'truncate'
|
||||
-->
|
||||
<!-- 分隔线 -->
|
||||
<div
|
||||
class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5"
|
||||
/>
|
||||
|
||||
<!-- Document Navigation -->
|
||||
<!-- 文档目录导航 -->
|
||||
<div class="overflow-y-auto" style="max-height: 80%">
|
||||
<UContainer>
|
||||
<UPageAside>
|
||||
<UContentNavigation
|
||||
@@ -89,12 +76,11 @@
|
||||
:navigation="navigation"
|
||||
color="primary"
|
||||
variant="pill"
|
||||
:ui="{
|
||||
}"
|
||||
:ui="{}"
|
||||
/>
|
||||
</UPageAside>
|
||||
</UContainer>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
230
content/2.essentials/1.index copy 2.md
Normal file
230
content/2.essentials/1.index copy 2.md
Normal file
@@ -0,0 +1,230 @@
|
||||
---
|
||||
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
|
||||
|
||||
Nuxt UI Pro 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*~~ |
|
||||
|
||||
For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ----------- | ------------------------ | ----------- |
|
||||
| Superscript | `<sup>superscript</sup>` | superscript |
|
||||
| Subscript | `<sub>subscript</sub>` | subscript |
|
||||
|
||||
## 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.
|
||||
```
|
||||
::
|
||||
230
content/2.essentials/1.index copy 3.md
Normal file
230
content/2.essentials/1.index copy 3.md
Normal file
@@ -0,0 +1,230 @@
|
||||
---
|
||||
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
|
||||
|
||||
Nuxt UI Pro 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*~~ |
|
||||
|
||||
For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ----------- | ------------------------ | ----------- |
|
||||
| Superscript | `<sup>superscript</sup>` | superscript |
|
||||
| Subscript | `<sub>subscript</sub>` | subscript |
|
||||
|
||||
## 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.
|
||||
```
|
||||
::
|
||||
230
content/2.essentials/1.index copy.md
Normal file
230
content/2.essentials/1.index copy.md
Normal file
@@ -0,0 +1,230 @@
|
||||
---
|
||||
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
|
||||
|
||||
Nuxt UI Pro 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*~~ |
|
||||
|
||||
For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ----------- | ------------------------ | ----------- |
|
||||
| Superscript | `<sup>superscript</sup>` | superscript |
|
||||
| Subscript | `<sub>subscript</sub>` | subscript |
|
||||
|
||||
## 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.
|
||||
```
|
||||
::
|
||||
458
content/2.essentials/2.code-blocks copy 2.md
Normal file
458
content/2.essentials/2.code-blocks copy 2.md
Normal file
@@ -0,0 +1,458 @@
|
||||
---
|
||||
title: Code Blocks
|
||||
description: Display inline code and code blocks
|
||||
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']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
::tip
|
||||
Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
uiPro: {
|
||||
prose: {
|
||||
codeIcon: {
|
||||
terminal: 'i-ph-terminal-window-duotone'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
||||
|
||||
::tip
|
||||
You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
#### Highlight Line
|
||||
|
||||
To highlight lines of code, add `{}` around the line numbers you want to highlight.
|
||||
Line highlighting is useful for focusing users on important parts of code examples.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts [nuxt.config.ts]{4-5}
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
::note{to="#pre"}
|
||||
Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
|
||||
::
|
||||
|
||||
### 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.
|
||||
````
|
||||
:::
|
||||
::
|
||||
|
||||
::note
|
||||
---
|
||||
target: _blank
|
||||
to: https://ui.nuxt.com/getting-started/typography#codetree
|
||||
---
|
||||
Learn more about the `code-tree` component.
|
||||
::
|
||||
|
||||
### `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;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
458
content/2.essentials/2.code-blocks copy 3.md
Normal file
458
content/2.essentials/2.code-blocks copy 3.md
Normal file
@@ -0,0 +1,458 @@
|
||||
---
|
||||
title: Code Blocks
|
||||
description: Display inline code and code blocks
|
||||
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']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
::tip
|
||||
Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
uiPro: {
|
||||
prose: {
|
||||
codeIcon: {
|
||||
terminal: 'i-ph-terminal-window-duotone'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
||||
|
||||
::tip
|
||||
You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
#### Highlight Line
|
||||
|
||||
To highlight lines of code, add `{}` around the line numbers you want to highlight.
|
||||
Line highlighting is useful for focusing users on important parts of code examples.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts [nuxt.config.ts]{4-5}
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
::note{to="#pre"}
|
||||
Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
|
||||
::
|
||||
|
||||
### 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.
|
||||
````
|
||||
:::
|
||||
::
|
||||
|
||||
::note
|
||||
---
|
||||
target: _blank
|
||||
to: https://ui.nuxt.com/getting-started/typography#codetree
|
||||
---
|
||||
Learn more about the `code-tree` component.
|
||||
::
|
||||
|
||||
### `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;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
458
content/2.essentials/2.code-blocks copy.md
Normal file
458
content/2.essentials/2.code-blocks copy.md
Normal file
@@ -0,0 +1,458 @@
|
||||
---
|
||||
title: Code Blocks
|
||||
description: Display inline code and code blocks
|
||||
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']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
::tip
|
||||
Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
uiPro: {
|
||||
prose: {
|
||||
codeIcon: {
|
||||
terminal: 'i-ph-terminal-window-duotone'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
||||
|
||||
::tip
|
||||
You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
#### Highlight Line
|
||||
|
||||
To highlight lines of code, add `{}` around the line numbers you want to highlight.
|
||||
Line highlighting is useful for focusing users on important parts of code examples.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts [nuxt.config.ts]{4-5}
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
icons: {
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-copy-check'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
::note{to="#pre"}
|
||||
Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
|
||||
::
|
||||
|
||||
### 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.
|
||||
````
|
||||
:::
|
||||
::
|
||||
|
||||
::note
|
||||
---
|
||||
target: _blank
|
||||
to: https://ui.nuxt.com/getting-started/typography#codetree
|
||||
---
|
||||
Learn more about the `code-tree` component.
|
||||
::
|
||||
|
||||
### `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;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
489
content/2.essentials/3.prose-components copy 2.md
Normal file
489
content/2.essentials/3.prose-components copy 2.md
Normal file
@@ -0,0 +1,489 @@
|
||||
---
|
||||
title: Prose Components
|
||||
description: Components to help you structure your content.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
---
|
||||
|
||||
### Accordion
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
:::accordion
|
||||
::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What are the main considerations when upgrading to Nuxt UI v3?
|
||||
---
|
||||
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.
|
||||
::::
|
||||
|
||||
::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: Is Nuxt UI v3 compatible with standalone Vue projects?
|
||||
---
|
||||
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
|
||||
::::
|
||||
|
||||
::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"}
|
||||
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
|
||||
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.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
|
||||
:::
|
||||
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Badge
|
||||
|
||||
Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
label: Preview
|
||||
---
|
||||
:::badge
|
||||
**v3.0.0-alpha.10**
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0-alpha.10**
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Callout
|
||||
|
||||
Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out.
|
||||
|
||||
Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::callout
|
||||
This is a `callout` with full **markdown** support.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::callout
|
||||
This is a `callout` with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::code-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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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
|
||||
|
||||
Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers.
|
||||
|
||||
Customize with `title`, `icon`, and `color` props. Cards can also act as links using `<NuxtLink>` properties for navigation.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### CardGroup
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
:::card-group{.w-full}
|
||||
::::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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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
|
||||
|
||||
Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
:::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Field
|
||||
|
||||
Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options.
|
||||
|
||||
::code-preview
|
||||
:::field{.w-full required name="name" type="string"}
|
||||
The `description` can be set as prop or in the default slot with full **markdown** support.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::field{name="name" type="string" required}
|
||||
The `description` can be set as prop or in the default slot with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### FieldGroup
|
||||
|
||||
Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties.
|
||||
|
||||
::code-preview
|
||||
:::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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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 `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### Kbd
|
||||
|
||||
Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`` ``
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### Tabs
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
:::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
|
||||
|
||||
:::tabs-item{label="Code" icon="i-lucide-code"}
|
||||
|
||||
```mdc
|
||||
::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::tabs-item{label="Preview" icon="i-lucide-eye"}
|
||||
|
||||
::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::::
|
||||
|
||||
:::
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### Steps
|
||||
|
||||
Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials.
|
||||
|
||||
Set the `level` prop to define the heading level to include in the step-by-step guide.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
:::steps{level="4"}
|
||||
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
|
||||
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
|
||||
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
|
||||
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
489
content/2.essentials/3.prose-components copy 3.md
Normal file
489
content/2.essentials/3.prose-components copy 3.md
Normal file
@@ -0,0 +1,489 @@
|
||||
---
|
||||
title: Prose Components
|
||||
description: Components to help you structure your content.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
---
|
||||
|
||||
### Accordion
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
:::accordion
|
||||
::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What are the main considerations when upgrading to Nuxt UI v3?
|
||||
---
|
||||
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.
|
||||
::::
|
||||
|
||||
::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: Is Nuxt UI v3 compatible with standalone Vue projects?
|
||||
---
|
||||
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
|
||||
::::
|
||||
|
||||
::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"}
|
||||
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
|
||||
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.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
|
||||
:::
|
||||
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Badge
|
||||
|
||||
Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
label: Preview
|
||||
---
|
||||
:::badge
|
||||
**v3.0.0-alpha.10**
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0-alpha.10**
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Callout
|
||||
|
||||
Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out.
|
||||
|
||||
Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::callout
|
||||
This is a `callout` with full **markdown** support.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::callout
|
||||
This is a `callout` with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::code-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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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
|
||||
|
||||
Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers.
|
||||
|
||||
Customize with `title`, `icon`, and `color` props. Cards can also act as links using `<NuxtLink>` properties for navigation.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### CardGroup
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
:::card-group{.w-full}
|
||||
::::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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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
|
||||
|
||||
Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
:::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Field
|
||||
|
||||
Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options.
|
||||
|
||||
::code-preview
|
||||
:::field{.w-full required name="name" type="string"}
|
||||
The `description` can be set as prop or in the default slot with full **markdown** support.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::field{name="name" type="string" required}
|
||||
The `description` can be set as prop or in the default slot with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### FieldGroup
|
||||
|
||||
Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties.
|
||||
|
||||
::code-preview
|
||||
:::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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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 `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### Kbd
|
||||
|
||||
Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`` ``
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### Tabs
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
:::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
|
||||
|
||||
:::tabs-item{label="Code" icon="i-lucide-code"}
|
||||
|
||||
```mdc
|
||||
::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::tabs-item{label="Preview" icon="i-lucide-eye"}
|
||||
|
||||
::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::::
|
||||
|
||||
:::
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### Steps
|
||||
|
||||
Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials.
|
||||
|
||||
Set the `level` prop to define the heading level to include in the step-by-step guide.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
:::steps{level="4"}
|
||||
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
|
||||
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
|
||||
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
|
||||
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
489
content/2.essentials/3.prose-components copy.md
Normal file
489
content/2.essentials/3.prose-components copy.md
Normal file
@@ -0,0 +1,489 @@
|
||||
---
|
||||
title: Prose Components
|
||||
description: Components to help you structure your content.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
---
|
||||
|
||||
### Accordion
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
:::accordion
|
||||
::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What are the main considerations when upgrading to Nuxt UI v3?
|
||||
---
|
||||
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.
|
||||
::::
|
||||
|
||||
::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: Is Nuxt UI v3 compatible with standalone Vue projects?
|
||||
---
|
||||
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
|
||||
::::
|
||||
|
||||
::::accordion-item{icon="i-lucide-circle-help" label="What about Nuxt UI Pro?"}
|
||||
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
|
||||
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.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
|
||||
:::
|
||||
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Badge
|
||||
|
||||
Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
label: Preview
|
||||
---
|
||||
:::badge
|
||||
**v3.0.0-alpha.10**
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0-alpha.10**
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Callout
|
||||
|
||||
Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out.
|
||||
|
||||
Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::callout
|
||||
This is a `callout` with full **markdown** support.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::callout
|
||||
This is a `callout` with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
::code-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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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
|
||||
|
||||
Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers.
|
||||
|
||||
Customize with `title`, `icon`, and `color` props. Cards can also act as links using `<NuxtLink>` properties for navigation.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### CardGroup
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
:::card-group{.w-full}
|
||||
::::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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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
|
||||
|
||||
Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
:::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### Field
|
||||
|
||||
Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options.
|
||||
|
||||
::code-preview
|
||||
:::field{.w-full required name="name" type="string"}
|
||||
The `description` can be set as prop or in the default slot with full **markdown** support.
|
||||
:::
|
||||
|
||||
#code
|
||||
```mdc
|
||||
::field{name="name" type="string" required}
|
||||
The `description` can be set as prop or in the default slot with full **markdown** support.
|
||||
::
|
||||
```
|
||||
::
|
||||
|
||||
### FieldGroup
|
||||
|
||||
Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties.
|
||||
|
||||
::code-preview
|
||||
:::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.
|
||||
::::
|
||||
:::
|
||||
|
||||
#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 `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### Kbd
|
||||
|
||||
Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`` ``
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### Tabs
|
||||
|
||||
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.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
:::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
|
||||
|
||||
:::tabs-item{label="Code" icon="i-lucide-code"}
|
||||
|
||||
```mdc
|
||||
::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::tabs-item{label="Preview" icon="i-lucide-eye"}
|
||||
|
||||
::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::::
|
||||
|
||||
:::
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### Steps
|
||||
|
||||
Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials.
|
||||
|
||||
Set the `level` prop to define the heading level to include in the step-by-step guide.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
:::steps{level="4"}
|
||||
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
|
||||
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
|
||||
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
|
||||
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
57
content/2.essentials/4.images-embeds copy 2.md
Normal file
57
content/2.essentials/4.images-embeds copy 2.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Images and Embeds
|
||||
description: Add image, video, and other HTML elements
|
||||
navigation:
|
||||
icon: i-lucide-image
|
||||
---
|
||||
|
||||
## Image
|
||||
|
||||
### Using Markdown
|
||||
|
||||
Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
::note
|
||||
If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
|
||||
::
|
||||
|
||||
### Using Embeds
|
||||
|
||||
Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
|
||||
|
||||
::code-preview
|
||||
{height="150"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
|
||||
```
|
||||
::
|
||||
|
||||
## Embeds and HTML elements
|
||||
|
||||
Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
: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;"}
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
: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;"}
|
||||
```
|
||||
::
|
||||
57
content/2.essentials/4.images-embeds copy 3.md
Normal file
57
content/2.essentials/4.images-embeds copy 3.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Images and Embeds
|
||||
description: Add image, video, and other HTML elements
|
||||
navigation:
|
||||
icon: i-lucide-image
|
||||
---
|
||||
|
||||
## Image
|
||||
|
||||
### Using Markdown
|
||||
|
||||
Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
::note
|
||||
If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
|
||||
::
|
||||
|
||||
### Using Embeds
|
||||
|
||||
Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
|
||||
|
||||
::code-preview
|
||||
{height="150"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
|
||||
```
|
||||
::
|
||||
|
||||
## Embeds and HTML elements
|
||||
|
||||
Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
: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;"}
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
: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;"}
|
||||
```
|
||||
::
|
||||
57
content/2.essentials/4.images-embeds copy.md
Normal file
57
content/2.essentials/4.images-embeds copy.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Images and Embeds
|
||||
description: Add image, video, and other HTML elements
|
||||
navigation:
|
||||
icon: i-lucide-image
|
||||
---
|
||||
|
||||
## Image
|
||||
|
||||
### Using Markdown
|
||||
|
||||
Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display.
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
::note
|
||||
If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
|
||||
::
|
||||
|
||||
### Using Embeds
|
||||
|
||||
Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling.
|
||||
|
||||
::code-preview
|
||||
{height="150"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
|
||||
```
|
||||
::
|
||||
|
||||
## Embeds and HTML elements
|
||||
|
||||
Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:w-full"
|
||||
---
|
||||
: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;"}
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
: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;"}
|
||||
```
|
||||
::
|
||||
Reference in New Issue
Block a user