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

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
+::