diff --git a/docs/content/1.getting-started/7.i18n/.navigation.yml b/docs/content/1.getting-started/7.i18n/.navigation.yml new file mode 100644 index 00000000..57a75c4e --- /dev/null +++ b/docs/content/1.getting-started/7.i18n/.navigation.yml @@ -0,0 +1 @@ +badge: New 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 cf92e331..575fcb5e 100644 --- a/docs/content/1.getting-started/7.i18n/1.nuxt.md +++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md @@ -1,7 +1,7 @@ --- navigation.title: Nuxt title: Internationalization (i18n) in a Nuxt app -description: 'Learn how to internationalize your Nuxt app and support multi-directional support (LTR/RTL).' +description: 'Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).' select: items: - label: Nuxt @@ -34,24 +34,6 @@ import { fr } from '@nuxt/ui/locale' ``` -### Direction - -Each locale has a default direction, but you can override it using the `dir` prop if needed. - -Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app: - -```vue [app.vue] - - - -``` - ### Custom locale You also have the option to add your own locale using `defineLocale`: @@ -61,6 +43,7 @@ You also have the option to add your own locale using `defineLocale`: const locale = defineLocale({ name: 'My custom locale', code: 'en', + dir: 'ltr', messages: { // implement pairs } @@ -149,6 +132,36 @@ const { locale } = useI18n() :: +### Dynamic direction + +Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components. + +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: + +```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 22d8ea99..f324c996 100644 --- a/docs/content/1.getting-started/7.i18n/2.vue.md +++ b/docs/content/1.getting-started/7.i18n/2.vue.md @@ -1,7 +1,7 @@ --- navigation.title: Vue title: Internationalization (i18n) in a Vue app -description: 'Learn how to internationalize your Vue app and support multi-directional support (LTR/RTL).' +description: 'Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).' select: items: - label: Nuxt @@ -34,24 +34,6 @@ import { fr } from '@nuxt/ui/locale' ``` -### Direction - -Each locale has a default direction, but you can override it using the `dir` prop if needed. - -Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app: - -```vue [App.vue] - - - -``` - ### Custom locale You also have the option to add your locale using `defineLocale`: @@ -63,6 +45,7 @@ import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale' const locale = defineLocale({ name: 'My custom locale', code: 'en', + dir: 'ltr', messages: { // implement pairs } @@ -159,6 +142,39 @@ const { locale } = useI18n() :: +### Dynamic direction + +Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components. + +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: + +```vue [App.vue] + + + +``` + ## Supported languages :supported-languages diff --git a/docs/content/3.components/0.app.md b/docs/content/3.components/0.app.md index 8e032123..5d1ca731 100644 --- a/docs/content/3.components/0.app.md +++ b/docs/content/3.components/0.app.md @@ -31,10 +31,6 @@ Use it as at the root of your app: Learn how to use the `locale` prop to change the locale of your app. :: -::tip{to="/getting-started/i18n/nuxt#direction"} -Learn how to use the `dir` prop to change the global reading direction of your app. -:: - ## API ### Props diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue index bc406cec..e3ae90e8 100644 --- a/src/runtime/components/App.vue +++ b/src/runtime/components/App.vue @@ -5,7 +5,7 @@ import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta' import type { ToasterProps, Locale } from '../types' import { en } from '../locale' -export interface AppProps extends Omit { +export interface AppProps extends Omit { tooltip?: TooltipProviderProps toaster?: ToasterProps | null locale?: Locale @@ -42,7 +42,7 @@ provide(localeContextInjectionKey, locale)