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

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'
-
-const messages = {
-  en: {
-    // ...
-  },
-  de: {
-    // ...
-  },
-}
+import ui from '@nuxt/ui/vue-plugin'
+import App from './App.vue'
 
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
   availableLocales: ['en', 'de'],
-  messages,
+  messages: {
+    en: {
+      // ...
+    },
+    de: {
+      // ...
+    }
+  }
 })
 
-createApp(App)
-  .use(i18n)
-  .mount('#app')
+const app = createApp(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