docs(getting-started): use ::steps and mention css files

docs/app/components/content/SupportedLanguages.vue

@@ -11,6 +11,7 @@ const getLocaleKeys = () => Object.keys(locales) as Array<keyof typeof locales>
 const localesList = getLocaleKeys().map(locale => [locale, locales[locale].name])
 </script>
 
+<!-- eslint-disable vue/singleline-html-element-content-newline -->
 <template>
   <div>
     <ProseUl>
@@ -21,21 +22,13 @@ const localesList = getLocaleKeys().map(locale => [locale, locales[locale].name]
         </template>
       </ProseLi>
     </ProseUl>
-    <ProseP>
+    <Note to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
-      If you need any other languages, a
+      If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>.
-      <ProseA href="https://github.com/nuxt/ui/pulls" target="_blank">
+    </Note>
-        PR
-      </ProseA>
-      is always welcome, you only need to add a language file
-      <ProseA href="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
-        here
-      </ProseA>
-    </ProseP>
     <Tip>
-      Use CLI command <ProseCode>nuxt-ui make locale</ProseCode> to create a new locale
+      You can use the <ProseCode>nuxt-ui</ProseCode> CLI to create a new locale:
-      <ProsePre language="bash">
+
-        nuxt-ui make locale --code "en" --name "English"
+      <ProsePre language="bash">nuxt-ui make locale --code "en" --name "English"</ProsePre>
-      </ProsePre>
     </Tip>
   </div>
 </template>

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]
+```css [assets/css/main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
-</style>
 ```
 
+::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

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]
+```css [assets/main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
-</style>
 ```
 
+::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

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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -33,7 +32,6 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
   --color-green-900: #0A5331;
   --color-green-950: #052E16;
 }
-</style>
 ```
 
 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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @source "../content/**/*.md";
-</style>
 ```
 
 ::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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @plugin "@tailwindcss/typography";
-</style>
 ```
 
 ::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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -172,7 +165,6 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
   --color-primary-900: var(--ui-color-primary-900);
   --color-primary-950: var(--ui-color-primary-950);
 }
-</style>
 ```
 ::
 
@@ -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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -229,7 +220,6 @@ You can change which shade is used for each color on light and dark mode:
 .dark {
   --ui-primary: var(--ui-color-primary-200);
 }
-</style>
 ```
 ::
 
@@ -324,8 +314,7 @@ body {
 ::tip
 You can customize these CSS variables to tailor the appearance of your application:
 
-```vue [app.vue]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -338,7 +327,6 @@ You can customize these CSS variables to tailor the appearance of your applicati
   --ui-bg: var(--ui-color-neutral-950);
   --ui-border: var(--ui-color-neutral-900);
 }
-</style>
 ```
 ::
 
@@ -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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 :root {
   --ui-radius: var(--radius-sm);
 }
-</style>
 ```
 ::
 

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]
+```css [main.css]
-<style>
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @theme {
   --font-family-sans: 'Public Sans', sans-serif;
 }
-</style>
 ```
 
 That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.

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'
 </template>
 ```
 
-#### 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', {
 </template>
 ```
 
-#### 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]
 <script setup lang="ts">
@@ -115,7 +117,13 @@ const { locale } = useI18n()
 </template>
 ```
 
-### Direction
+::
+
+### Supported languages
+
+:supported-languages
+
+## Direction
 
 Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
 
@@ -127,11 +135,13 @@ Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of yo
 </template>
 ```
 
-#### Dynamic direction
+### Dynamic direction
 
-To dynamically change the global reading direction of your app, you can use the [useTextDirection](https://vueuse.org/core/useTextDirection/) composable.
+To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
 
-1. Install the `@vueuse/core` package:
+::steps{level="4"}
+
+#### Install the `@vueuse/core` package
 
 ::code-group{sync="pm"}
 
@@ -153,7 +163,7 @@ bun add @vueuse/core
 
 ::
 
-2. Then in your `app.vue`:
+#### Set the `dir` prop using `useTextDirection`
 
 ```vue [app.vue]
 <script setup lang="ts">
@@ -170,6 +180,4 @@ const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
 </template>
 ```
 
-## Supported languages
+::
-
-:supported-languages

docs/content/1.getting-started/7.i18n/2.vue.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'
 </template>
 ```
 
-#### Custom locale
+### Custom locale
 
 You also have the option to add your locale using `defineLocale`:
 
@@ -52,11 +52,13 @@ const locale = defineLocale('My custom locale', {
 </template>
 ```
 
-#### Dynamic locale
+### Dynamic locale
 
-To dynamically switch between languages, you can use the [VueI18n](https://vue-i18n.intlify.dev/) plugin.
+To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.
 
-1. Install the `vue-i18n` package:
+::steps{level="4"}
+
+#### Install the Vue I18n package
 
 ::code-group{sync="pm"}
 
@@ -78,35 +80,37 @@ bun add vue-i18n@10
 
 ::
 
-2. Define the `createI18n` instance and register the `i18n` plugin in your `main.ts` file:
+#### Use the Vue I18n plugin in your `main.ts`
 
-```ts{3-19,22} [main.ts]
+```ts [main.ts]{2,6-18,22}
 import { createApp } from 'vue'
-import App from './App.vue'
 import { createI18n } from 'vue-i18n'
-
+import ui from '@nuxt/ui/vue-plugin'
-const messages = {
+import App from './App.vue'
-  en: {
-    // ...
-  },
-  de: {
-    // ...
-  },
-}
 
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
   availableLocales: ['en', 'de'],
-  messages,
+  messages: {
+    en: {
+      // ...
+    },
+    de: {
+      // ...
+    }
+  }
 })
 
-createApp(App)
+const app = createApp(App)
-  .use(i18n)
+
-  .mount('#app')
+app.use(i18n)
+app.use(ui)
+
+app.mount('#app')
 ```
 
-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]
 <script setup lang="ts">
@@ -123,7 +127,13 @@ const { locale } = useI18n()
 </template>
 ```
 
-### Direction
+::
+
+## Supported languages
+
+:supported-languages
+
+## Direction
 
 Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
 
@@ -135,11 +145,13 @@ Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of yo
 </template>
 ```
 
-#### Dynamic direction
+### Dynamic direction
 
-To dynamically change the global reading direction of your app, you can use the [useTextDirection](https://vueuse.org/core/useTextDirection/) composable.
+To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
 
-1. Install the `@vueuse/core` package:
+::steps{level="4"}
+
+#### Install the `@vueuse/core` package
 
 ::code-group{sync="pm"}
 
@@ -161,7 +173,7 @@ bun add @vueuse/core
 
 ::
 
-2. Then in your `App.vue`:
+#### Set the `dir` prop using `useTextDirection`
 
 ```vue [App.vue]
 <script setup lang="ts">
@@ -178,7 +190,3 @@ const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
   </UApp>
 </template>
 ```
-
-## Supported languages
-
-:supported-languages