mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
docs(content): lint fix
This commit is contained in:
@@ -79,6 +79,7 @@ Learn how to install and configure Nuxt UI in a Vue project in the **Vue install
|
||||
We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities.
|
||||
|
||||
Key points to consider:
|
||||
|
||||
- A comprehensive migration guide will be available in the coming weeks.
|
||||
- Review the new documentation and components carefully before attempting to upgrade.
|
||||
- If you encounter any issues, please report them on our [GitHub repository](https://github.com/nuxt/ui/issues).
|
||||
|
||||
@@ -65,6 +65,7 @@ export default defineNuxtConfig({
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::callout{icon="i-simple-icons-visualstudiocode"}
|
||||
|
||||
@@ -68,6 +68,7 @@ Nuxt UI registers `unplugin-auto-import` and `unplugin-vue-components`, which wi
|
||||
auto-imports.d.ts
|
||||
components.d.ts
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
#### Use the Nuxt UI Vue plugin in your `main.ts`
|
||||
@@ -107,6 +108,7 @@ app.use(ui)
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::callout{icon="i-simple-icons-visualstudiocode"}
|
||||
|
||||
@@ -14,6 +14,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
|
||||
::module-only
|
||||
#ui
|
||||
:::div
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -36,10 +37,12 @@ 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";
|
||||
@@ -62,6 +65,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -80,22 +84,26 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/
|
||||
::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";
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -110,22 +118,26 @@ 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";
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -172,6 +184,7 @@ export default defineAppConfig({
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
#vue
|
||||
@@ -197,6 +210,7 @@ export default defineConfig({
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::
|
||||
@@ -240,6 +254,7 @@ export default defineNuxtConfig({
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#vue
|
||||
@@ -267,6 +282,7 @@ export default defineConfig({
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -278,6 +294,7 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -296,10 +313,12 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
|
||||
--color-primary-950: var(--ui-color-primary-950);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
@@ -318,6 +337,7 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
|
||||
--color-primary-950: var(--ui-color-primary-950);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -367,6 +387,7 @@ You can change which shade is used for each color on light and dark mode:
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -379,10 +400,12 @@ 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{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
@@ -395,6 +418,7 @@ You can change which shade is used for each color on light and dark mode:
|
||||
--ui-primary: var(--ui-color-primary-200);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -486,6 +510,7 @@ body {
|
||||
@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::tip
|
||||
@@ -494,6 +519,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -508,10 +534,12 @@ You can customize these CSS variables to tailor the appearance of your applicati
|
||||
--ui-border: var(--ui-color-neutral-900);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
@@ -526,6 +554,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
|
||||
--ui-border: var(--ui-color-neutral-900);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -551,6 +580,7 @@ You can customize the default radius value using the default Tailwind CSS variab
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -559,10 +589,12 @@ You can customize the default radius value using the default Tailwind CSS variab
|
||||
--ui-radius: var(--radius-sm);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
@@ -571,6 +603,7 @@ You can customize the default radius value using the default Tailwind CSS variab
|
||||
--ui-radius: var(--radius-sm);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -592,6 +625,7 @@ You can customize the default container width using the default Tailwind CSS var
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -604,10 +638,12 @@ You can customize the default container width using the default Tailwind CSS var
|
||||
--ui-container: var(--container-8xl);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
@@ -620,6 +656,7 @@ You can customize the default container width using the default Tailwind CSS var
|
||||
--ui-container: var(--container-8xl);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
@@ -758,6 +795,7 @@ You can explore the theme for each component in two ways:
|
||||
|
||||
- Check the `Theme` section in the documentation of each individual component.
|
||||
- Browse the source code directly in the GitHub repository at [`v3/src/theme`](https://github.com/nuxt/ui/tree/v3/src/theme).
|
||||
|
||||
::
|
||||
|
||||
### Config
|
||||
@@ -780,6 +818,7 @@ export default defineAppConfig({
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
#vue
|
||||
@@ -808,6 +847,7 @@ export default defineConfig({
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::
|
||||
|
||||
@@ -34,7 +34,7 @@ props:
|
||||
::
|
||||
|
||||
::note
|
||||
You can use any name from the https://icones.js.org collection.
|
||||
You can use any name from the <https://icones.js.org> collection.
|
||||
::
|
||||
|
||||
### Component Props
|
||||
|
||||
@@ -28,7 +28,7 @@ props:
|
||||
::
|
||||
|
||||
::note
|
||||
You can use any name from the https://icones.js.org collection.
|
||||
You can use any name from the <https://icones.js.org> collection.
|
||||
::
|
||||
|
||||
### Component Props
|
||||
|
||||
@@ -16,6 +16,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
|
||||
::module-only
|
||||
#ui
|
||||
:::div
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
@@ -24,10 +25,12 @@ 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";
|
||||
@@ -36,6 +39,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
|
||||
@@ -55,8 +55,10 @@ const locale = defineLocale({
|
||||
|
||||
::tip
|
||||
Look at the `code` parameter, there you need to pass the iso code of the language. Example:
|
||||
|
||||
* `hi` Hindi (language)
|
||||
* `de-AT`: German (language) as used in Austria (region)
|
||||
|
||||
::
|
||||
|
||||
### Dynamic locale
|
||||
|
||||
@@ -57,8 +57,10 @@ const locale = defineLocale({
|
||||
|
||||
::tip
|
||||
Look at the `code` parameter, there you need to pass the iso code of the language. Example:
|
||||
|
||||
* `hi` Hindi (language)
|
||||
* `de-AT`: German (language) as used in Austria (region)
|
||||
|
||||
::
|
||||
|
||||
### Dynamic locale
|
||||
|
||||
Reference in New Issue
Block a user