diff --git a/docs/app/components/content/SupportedLanguages.vue b/docs/app/components/content/SupportedLanguages.vue index 907c2fe0..89e210c5 100644 --- a/docs/app/components/content/SupportedLanguages.vue +++ b/docs/app/components/content/SupportedLanguages.vue @@ -11,6 +11,7 @@ const getLocaleKeys = () => Object.keys(locales) as Array const localesList = getLocaleKeys().map(locale => [locale, locales[locale].name]) + - - If you need any other languages, a - - PR - - is always welcome, you only need to add a language file - - here - - + + If you need additional languages, you can contribute by creating a PR to add a new locale in src/runtime/locale/. + - Use CLI command nuxt-ui make locale to create a new locale - - nuxt-ui make locale --code "en" --name "English" - + You can use the nuxt-ui CLI to create a new locale: + + nuxt-ui make locale --code "en" --name "English" diff --git a/docs/content/1.getting-started/2.installation/1.nuxt.md b/docs/content/1.getting-started/2.installation/1.nuxt.md index 6851e267..34fe9eb2 100644 --- a/docs/content/1.getting-started/2.installation/1.nuxt.md +++ b/docs/content/1.getting-started/2.installation/1.nuxt.md @@ -14,7 +14,9 @@ select: ## Setup -1. Install the Nuxt UI v3 alpha package: +::steps{level="4"} + +#### Install the Nuxt UI v3 alpha package ::code-group{sync="pm"} @@ -37,10 +39,10 @@ bun add @nuxt/ui@next :: ::warning -If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` directly in your project's root directory. +If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` in your project's root directory. :: -2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}: +#### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"} ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -48,15 +50,24 @@ export default defineNuxtConfig({ }) ``` -3. Import Tailwind CSS and Nuxt UI in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property): +#### Import Tailwind CSS and Nuxt UI in your CSS -```vue [app.vue] - ``` +::note +Use the `css` property in your `nuxt.config.ts` to import your CSS file. + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui'], + css: ['~/assets/css/main.css'] +}) +``` +:: + ::tip 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 @@ -70,8 +81,6 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace. :: -::warning -IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected. :: ## Options diff --git a/docs/content/1.getting-started/2.installation/2.vue.md b/docs/content/1.getting-started/2.installation/2.vue.md index d66ac899..45fa0fe4 100644 --- a/docs/content/1.getting-started/2.installation/2.vue.md +++ b/docs/content/1.getting-started/2.installation/2.vue.md @@ -14,7 +14,9 @@ select: ## Setup -1. Install the Nuxt UI v3 alpha package: +::steps{level="4"} + +#### Install the Nuxt UI v3 alpha package ::code-group{sync="pm"} @@ -37,12 +39,12 @@ bun add @nuxt/ui@next :: ::warning -If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` directly in your project's root directory. +If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next`, `vue-router` and `@unhead/vue` in your project's root directory. :: -2. Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}: +#### Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"} -```ts [vite.config.ts] +```ts [vite.config.ts]{3,8} import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ui from '@nuxt/ui/vite' @@ -51,7 +53,7 @@ export default defineConfig({ plugins: [ vue(), ui() - ], + ] }) ``` @@ -71,28 +73,45 @@ components.d.ts ``` :: -3. Register the Nuxt UI Vue plugin in your app: +#### Use the Nuxt UI Vue plugin in your `main.ts` -```ts [main.ts] +```ts [main.ts]{2,7} import { createApp } from 'vue' -import nuxtUI from '@nuxt/ui/vue-plugin' +import ui from '@nuxt/ui/vue-plugin' import App from './App.vue' const app = createApp(App) -// ... -app.use(nuxtUI) + +app.use(ui) + app.mount('#app') ``` -4. Import Tailwind CSS and Nuxt UI in your `App.vue`{lang="ts-type"} or CSS: +#### Import Tailwind CSS and Nuxt UI in your CSS -```vue [App.vue] - ``` +::note +Import the CSS file in your `main.ts`. + +```ts [main.ts]{1} +import './assets/main.css' + +import { createApp } from 'vue' +import ui from '@nuxt/ui/vue-plugin' +import App from './App.vue' + +const app = createApp(App) + +app.use(ui) + +app.mount('#app') +``` +:: + ::tip 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 @@ -106,8 +125,6 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace. :: -::warning -IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected. :: ## Options diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md index 1dda723a..87bd2144 100644 --- a/docs/content/1.getting-started/3.theme.md +++ b/docs/content/1.getting-started/3.theme.md @@ -11,8 +11,7 @@ Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, le Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive: -```vue [app.vue] - ``` 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. @@ -48,13 +46,11 @@ 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): -```vue [app.vue] - ``` ::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14078"} @@ -65,13 +61,11 @@ You can learn more about the `@source` directive in this pull request. You can use the `@plugin` directive to import Tailwind CSS plugins. -```vue [app.vue] - ``` ::note{to="https://github.com/tailwindlabs/tailwindcss/pull/14264"} @@ -154,8 +148,7 @@ 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: -```vue [app.vue] - ``` :: @@ -217,8 +209,7 @@ 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: -```vue [app.vue] - ``` :: @@ -324,8 +314,7 @@ body { ::tip You can customize these CSS variables to tailor the appearance of your application: -```vue [app.vue] - ``` :: @@ -359,15 +347,13 @@ 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: -```vue [app.vue] - ``` :: diff --git a/docs/content/1.getting-started/5.fonts.md b/docs/content/1.getting-started/5.fonts.md index 552f228b..2933bad4 100644 --- a/docs/content/1.getting-started/5.fonts.md +++ b/docs/content/1.getting-started/5.fonts.md @@ -12,15 +12,13 @@ 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: -```vue [app.vue] - ``` That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser. diff --git a/docs/content/1.getting-started/7.i18n/1.nuxt.md b/docs/content/1.getting-started/7.i18n/1.nuxt.md index 2db84bb9..1d1d367f 100644 --- a/docs/content/1.getting-started/7.i18n/1.nuxt.md +++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md @@ -12,11 +12,11 @@ select: to: /getting-started/i18n/vue --- -## Usage - +::note{to="/components/app"} Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations. +:: -### Locale +## Locale Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`: @@ -32,7 +32,7 @@ import { fr } from '@nuxt/ui/locale' ``` -#### Custom locale +### Custom locale You also have the option to add your own locale using `defineLocale`: @@ -50,11 +50,13 @@ const locale = defineLocale('My custom locale', { ``` -#### Dynamic locale +### Dynamic locale -To dynamically switch between languages, you can use the [NuxtI18n](https://i18n.nuxtjs.org/docs/getting-started) module. +To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module. -1. Install the `@nuxtjs/i18n` package: +::steps{level="4"} + +#### Install the Nuxt I18n package ::code-group{sync="pm"} @@ -76,7 +78,7 @@ bun add @nuxtjs/i18n@next :: -2. Add the `@nuxtjs/i18n` module to your `nuxt.config.ts`{lang="ts-type"} and define the locales you want to support: +#### Add the Nuxt I18n module in your `nuxt.config.ts`{lang="ts-type"} ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -99,7 +101,7 @@ export default defineNuxtConfig({ }) ``` -3. Use the `locale` prop with the `useI18n` locale you want to use from `@nuxt/ui/locale`: +#### Set the `locale` prop using `useI18n` ```vue [app.vue]