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 8a7838bc..e3315633 100644
--- a/docs/content/1.getting-started/7.i18n/1.nuxt.md
+++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md
@@ -17,6 +17,11 @@ Nuxt UI provides an **App** component that wraps your app to provide global conf
### Locale
+::module-only
+
+#ui
+:::div
+
Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
```vue [app.vue]
@@ -31,13 +36,42 @@ import { fr } from '@nuxt/ui/locale'
```
+:::
+
+#ui-pro
+:::div
+
+Use the `locale` prop with the locale you want to use from `@nuxt/ui-pro/locale`:
+
+```vue [app.vue]
+
+
+
+
+
+
+
+```
+
+:::
+::
+
### Custom locale
You also have the option to add your own locale using `defineLocale`:
+::module-only
+
+#ui
+:::div
+
```vue [app.vue]
+
+
+
+
+
+
+```
+
+:::
+::
+
::tip
Look at the `code` parameter, there you need to pass the iso code of the language. Example:
@@ -116,6 +179,11 @@ export default defineNuxtConfig({
#### Set the `locale` prop using `useI18n`
+::module-only
+
+#ui
+:::div
+
```vue [app.vue]
+
+
+
+
+
+
+```
+
+:::
+::
+
::
### Dynamic direction
@@ -138,6 +228,11 @@ Each locale has a `dir` property which will be used by the `App` component to se
In a multilingual application, you might want to set the `lang` and `dir` attributes on the `` element dynamically based on the user's locale, which you can do with the [useHead](https://nuxt.com/docs/api/composables/use-head) composable:
+::module-only
+
+#ui
+:::div
+
```vue [app.vue]
+
+
+
+
+
+
+```
+
+:::
+::
+
## Supported languages
:supported-languages
diff --git a/docs/content/1.getting-started/7.i18n/2.vue.md b/docs/content/1.getting-started/7.i18n/2.vue.md
index 144dc69e..9476433c 100644
--- a/docs/content/1.getting-started/7.i18n/2.vue.md
+++ b/docs/content/1.getting-started/7.i18n/2.vue.md
@@ -17,6 +17,11 @@ Nuxt UI provides an **App** component that wraps your app to provide global conf
### Locale
+::module-only
+
+#ui
+:::div
+
Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
```vue [App.vue]
@@ -31,15 +36,43 @@ import { fr } from '@nuxt/ui/locale'
```
+:::
+
+#ui-pro
+:::div
+
+Use the `locale` prop with the locale you want to use from `@nuxt/ui-pro/locale`:
+
+```vue [App.vue]
+
+
+
+
+
+
+
+```
+
+:::
+::
+
### Custom locale
You also have the option to add your locale using `defineLocale`:
+::module-only
+
+#ui
+:::div
+
```vue [App.vue]
+
+
+
+
+
+
+```
+
+:::
+::
+
::tip
Look at the `code` parameter, there you need to pass the iso code of the language. Example:
@@ -131,6 +194,11 @@ app.mount('#app')
#### Set the `locale` prop using `useI18n`
+::module-only
+
+#ui
+:::div
+
```vue [App.vue]
+
+
+
+
+
+
+```
+
+:::
+::
+
::
### Dynamic direction
@@ -154,6 +245,11 @@ Each locale has a `dir` property which will be used by the `App` component to se
In a multilingual application, you might want to set the `lang` and `dir` attributes on the `` element dynamically based on the user's locale, which you can do with the [useHead](https://unhead.unjs.io/usage/composables/use-head) composable:
+::module-only
+
+#ui
+:::div
+
```vue [App.vue]
+
+
+
+
+
+
+```
+
+:::
+::
+
## Supported languages
:supported-languages
diff --git a/docs/package.json b/docs/package.json
index d37868ad..831b30de 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
"@nuxt/content": "^3.3.0",
"@nuxt/image": "^1.9.0",
"@nuxt/ui": "latest",
- "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@07b08b1",
+ "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@ab37812",
"@nuxthub/core": "^0.8.18",
"@nuxtjs/plausible": "^1.2.0",
"@octokit/rest": "^21.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e889cc8..0c68f55c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -241,8 +241,8 @@ importers:
specifier: workspace:*
version: link:..
'@nuxt/ui-pro':
- specifier: https://pkg.pr.new/@nuxt/ui-pro@07b08b1
- version: https://pkg.pr.new/@nuxt/ui-pro@07b08b1(@babel/parser@7.26.9)(magicast@0.3.5)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
+ specifier: https://pkg.pr.new/@nuxt/ui-pro@ab37812
+ version: https://pkg.pr.new/@nuxt/ui-pro@ab37812(@babel/parser@7.26.9)(magicast@0.3.5)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
'@nuxthub/core':
specifier: ^0.8.18
version: 0.8.18(db0@0.3.1(better-sqlite3@11.8.1))(ioredis@5.6.0)(magicast@0.3.5)(vite@6.2.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))
@@ -1704,8 +1704,8 @@ packages:
vitest:
optional: true
- '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@07b08b1':
- resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@07b08b1}
+ '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@ab37812':
+ resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@ab37812}
version: 3.0.0-beta.3
peerDependencies:
typescript: 5.6.3
@@ -8707,12 +8707,12 @@ snapshots:
- typescript
- yaml
- '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@07b08b1(@babel/parser@7.26.9)(magicast@0.3.5)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))':
+ '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@ab37812(@babel/parser@7.26.9)(magicast@0.3.5)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@nuxt/kit': 3.16.0(magicast@0.3.5)
'@nuxt/schema': 3.16.0
'@nuxt/ui': 'link:'
- '@vueuse/core': 12.8.2(typescript@5.6.3)
+ '@vueuse/core': 13.0.0(vue@3.5.13(typescript@5.6.3))
consola: 3.4.0
defu: 6.1.4
dotenv: 16.4.7
@@ -8726,7 +8726,7 @@ snapshots:
tinyglobby: 0.2.12
typescript: 5.6.3
unplugin: 2.2.0
- unplugin-auto-import: 19.1.1(@nuxt/kit@3.16.0(magicast@0.3.5))(@vueuse/core@12.8.2(typescript@5.6.3))
+ unplugin-auto-import: 19.1.1(@nuxt/kit@3.16.0(magicast@0.3.5))(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.6.3)))
unplugin-vue-components: 28.4.1(@babel/parser@7.26.9)(@nuxt/kit@3.16.0(magicast@0.3.5))(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- '@babel/parser'
@@ -14788,18 +14788,6 @@ snapshots:
universalify@2.0.1: {}
- unplugin-auto-import@19.1.1(@nuxt/kit@3.16.0(magicast@0.3.5))(@vueuse/core@12.8.2(typescript@5.6.3)):
- dependencies:
- local-pkg: 1.1.1
- magic-string: 0.30.17
- picomatch: 4.0.2
- unimport: 4.1.2
- unplugin: 2.2.0
- unplugin-utils: 0.2.4
- optionalDependencies:
- '@nuxt/kit': 3.16.0(magicast@0.3.5)
- '@vueuse/core': 12.8.2(typescript@5.6.3)
-
unplugin-auto-import@19.1.1(@nuxt/kit@3.16.0(magicast@0.3.5))(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.6.3))):
dependencies:
local-pkg: 1.1.1
diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue
index 63068931..b3065d3e 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -1,12 +1,11 @@
-