Skip to content

Commit 036f767

Browse files
HugoRCDHugoRCD
committed
up
1 parent 60e2032 commit 036f767

File tree

8 files changed

+145
-1
lines changed

8 files changed

+145
-1
lines changed

‎content/1.getting-started/.navigation.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
title: Getting Started
1+
title: Getting Started
2+
icon: false

‎content/1.getting-started/1.index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Introduction
33
description: Welcome to Nuxt UI Pro documentation template.
4+
navigation.icon: i-lucide-house
45
---
56

67
This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.

‎content/1.getting-started/2.installation.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Installation
33
description: Get started with Nuxt UI Pro documentation template.
4+
navigation.icon: i-lucide-download
45
---
56

67
::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}

‎content/1.getting-started/3.usage.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Usage
33
description: Learn how to write and customize your documentation.
4+
navigation.icon: i-lucide-settings
45
---
56

67
This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content, [`@nuxtjs/fontaine`](https://github.com/nuxt-modules/fontaine) and [`@nuxtjs/google-fonts`](https://github.com/nuxt-modules/google-fonts) to change the font and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.

‎content/2.essentials/1.markdown-syntax.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Markdown Syntax
33
description: Text, title, and styling in standard markdown.
4+
navigation.icon: i-lucide-heading-1
45
---
56

67
## Titles

‎content/2.essentials/2.code-blocks.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Code Blocks
33
description: Display inline code and code blocks
4+
navigation.icon: i-lucide-code-xml
45
---
56

67
## Basic

‎content/2.essentials/3.prose-components.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
title: Prose Components
3+
description: Components to help you structure your content.
4+
navigation.icon: i-lucide-component
5+
---
6+
7+
### Accordion
8+
9+
Use the `accordion` and `accordion-item` components to display an [Accordion](/components/accordion) in your content.
10+
11+
::code-preview{class="[&>div]:*:my-0"}
12+
13+
:::accordion
14+
15+
::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
16+
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.
17+
::
18+
19+
::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
20+
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started.
21+
::
22+
23+
::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
24+
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.
25+
::
26+
27+
:::
28+
29+
#code
30+
31+
```mdc
32+
::accordion
33+
34+
::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
35+
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.
36+
::
37+
38+
::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
39+
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started.
40+
::
41+
42+
::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
43+
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.
44+
::
45+
46+
::
47+
```
48+
49+
::
50+
51+
### Badge
52+
53+
Use markdown in the default slot of the `badge` component to display a [Badge](/components/badge) in your content.
54+
55+
::code-preview{label="Preview"}
56+
57+
:::badge
58+
**v3.0.0-alpha.10**
59+
:::
60+
61+
#code
62+
63+
```mdc
64+
::badge
65+
**v3.0.0-alpha.10**
66+
::
67+
```
68+
69+
::
70+
71+
### Callout
72+
73+
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
74+
75+
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
76+
77+
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
78+
79+
::callout
80+
This is a `callout` with full **markdown** support.
81+
::
82+
83+
#code
84+
85+
```mdc
86+
::callout
87+
This is a `callout` with full **markdown** support.
88+
::
89+
```
90+
91+
::
92+
93+
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
94+
95+
::code-preview{label="Preview"}
96+
97+
:::div{class="flex flex-col gap-4 w-full"}
98+
99+
::note{class="w-full my-0"}
100+
Here's some additional information for you.
101+
::
102+
103+
::tip{class="w-full my-0"}
104+
Here's a helpful suggestion.
105+
::
106+
107+
::warning{class="w-full my-0"}
108+
Be careful with this action as it might have unexpected results.
109+
::
110+
111+
::caution{class="w-full my-0"}
112+
This action cannot be undone.
113+
::
114+
115+
:::
116+
117+
#code
118+
119+
```mdc
120+
::note
121+
Here's some additional information.
122+
::
123+
124+
::tip
125+
Here's a helpful suggestion.
126+
::
127+
128+
::warning
129+
Be careful with this action as it might have unexpected results.
130+
::
131+
132+
::caution
133+
This action cannot be undone.
134+
::
135+
```
136+
137+
::

‎content/2.essentials/4.images-embeds.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Images and Embeds
33
description: Add image, video, and other HTML elements
4+
navigation.icon: i-lucide-image
45
---
56

67
## Image

0 commit comments

Comments
 (0)