arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 00:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: add @nuxt/ui-pro source (#2775)

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-04 21:15:07 +01:00
committed by GitHub
parent e79103131f
commit 01c3934403
24 changed files with 880 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/1.getting-started/2.installation/1.nuxt.md
View File

@@ -2,6 +2,7 @@
title: Installation
description: 'Learn how to install and configure Nuxt UI in your Nuxt application.'
framework: nuxt
module: ui
---
::callout{to="/getting-started/installation/vue" icon="i-logos-vue" class="hidden"}
@@ -55,7 +56,7 @@ export default defineNuxtConfig({
@import "@nuxt/ui";
```
::note
::tip
Use the `css` property in your `nuxt.config.ts` to import your CSS file.
```ts [nuxt.config.ts]
@@ -66,9 +67,10 @@ export default defineNuxtConfig({
```
::
::tip
::callout{icon="i-simple-icons-visualstudiocode"}
It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
```json
```json [settings.json]
"files.associations": {
"*.css": "tailwindcss"
},

8
docs/content/1.getting-started/2.installation/2.vue.md
View File

@@ -2,6 +2,7 @@
title: Installation
description: 'Learn how to install and configure Nuxt UI in your Vue application.'
framework: vue
module: ui
---
::callout{to="/getting-started/installation/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
@@ -90,7 +91,7 @@ app.mount('#app')
@import "@nuxt/ui";
```
::note
::tip
Import the CSS file in your `main.ts`.
```ts [main.ts]{1}
@@ -108,9 +109,10 @@ app.mount('#app')
```
::
::tip
::callout{icon="i-simple-icons-visualstudiocode"}
It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
```json
```json [settings.json]
"files.associations": {
"*.css": "tailwindcss"
},

175
docs/content/1.getting-started/3.theme.md
View File

@@ -11,6 +11,9 @@ Nuxt UI v3 uses Tailwind CSS v4 beta, you can read the [prerelease documentation
Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -33,6 +36,34 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
--color-green-950: #052E16;
}
```
:::
#ui-pro
:::div
```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;
}
```
:::
::
The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
@@ -46,12 +77,27 @@ You can use the `@source` directive to add explicit content glob patterns if you
This can be useful when writing Tailwind classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content):
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@source "../content";
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@source "../content";
```
:::
::
::note{to="https://tailwindcss.com/docs/v4-beta#adding-content-sources"}
Learn how to add content sources in Tailwind CSS v4.
@@ -61,12 +107,27 @@ Learn how to add content sources in Tailwind CSS v4.
You can use the `@plugin` directive to import Tailwind CSS plugins.
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@plugin "@tailwindcss/typography";
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@plugin "@tailwindcss/typography";
```
:::
::
::note{to="https://tailwindcss.com/docs/v4-beta#using-plugins"}
Learn more about using plugins in Tailwind CSS v4.
@@ -214,6 +275,9 @@ These color aliases are not automatically defined as Tailwind CSS colors, so cla
However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -232,6 +296,31 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
--color-primary-950: var(--ui-color-primary-950);
}
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--color-primary-50: var(--ui-color-primary-50);
--color-primary-100: var(--ui-color-primary-100);
--color-primary-200: var(--ui-color-primary-200);
--color-primary-300: var(--ui-color-primary-300);
--color-primary-400: var(--ui-color-primary-400);
--color-primary-500: var(--ui-color-primary-500);
--color-primary-600: var(--ui-color-primary-600);
--color-primary-700: var(--ui-color-primary-700);
--color-primary-800: var(--ui-color-primary-800);
--color-primary-900: var(--ui-color-primary-900);
--color-primary-950: var(--ui-color-primary-950);
}
```
:::
::
::
### Tokens
@@ -275,6 +364,9 @@ You can use these variables in classes like `text-[var(--ui-primary)]`, it will
::tip
You can change which shade is used for each color on light and dark mode:
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -287,6 +379,25 @@ You can change which shade is used for each color on light and dark mode:
--ui-primary: var(--ui-color-primary-200);
}
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-primary: var(--ui-color-primary-700);
}
.dark {
--ui-primary: var(--ui-color-primary-200);
}
```
:::
::
::
#### Neutral Palette
@@ -380,6 +491,9 @@ body {
::tip
You can customize these CSS variables to tailor the appearance of your application:
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -394,6 +508,27 @@ You can customize these CSS variables to tailor the appearance of your applicati
--ui-border: var(--ui-color-neutral-900);
}
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-bg: var(--ui-color-neutral-50);
--ui-text: var(--ui-color-neutral-900);
}
.dark {
--ui-bg: var(--ui-color-neutral-950);
--ui-border: var(--ui-color-neutral-900);
}
```
:::
::
::
#### Border Radius
@@ -413,6 +548,9 @@ Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"
::tip
You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -421,6 +559,21 @@ You can customize the default radius value using the default Tailwind CSS variab
--ui-radius: var(--radius-sm);
}
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-radius: var(--radius-sm);
}
```
:::
::
::
#### Container
@@ -436,6 +589,9 @@ Nuxt UI uses a global `--ui-container` CSS variable to define the width of the c
::tip
You can customize the default container width using the default Tailwind CSS variables or a value of your choice:
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -448,6 +604,25 @@ You can customize the default container width using the default Tailwind CSS var
--ui-container: var(--container-8xl);
}
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--container-8xl: 90rem;
}
:root {
--ui-container: var(--container-8xl);
}
```
:::
::
::
## Components theme

2
docs/content/1.getting-started/4.icons/1.nuxt.md
View File

@@ -124,6 +124,6 @@ Read more about this in the `@nuxt/icon` documentation.
## Theme
You can change the default icons used by Nuxt UI components in your `app.config.ts`:
You can change the default icons used by components in your `app.config.ts`:
:icons-theme

17
docs/content/1.getting-started/5.fonts.md
View File

@@ -13,6 +13,9 @@ links:
Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/fonts) module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS. It will be automatically loaded and optimized for you.
::module-only
#ui
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -21,6 +24,20 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
--font-sans: 'Public Sans', sans-serif;
}
```
:::
#ui-pro
:::div
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme {
--font-sans: 'Public Sans', sans-serif;
}
```
:::
::
You can disable the `@nuxt/fonts` module with the `ui.fonts` option in your `nuxt.config.ts`: