arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(App): remove dir prop (#2630)

Browse Source
This commit is contained in:
Benjamin Canac
2024-11-13 16:23:08 +01:00
committed by GitHub
parent 9241ba1230
commit 7cc26d098d
6 changed files with 71 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content/1.getting-started/7.i18n/.navigation.yml Normal file
View File

@@ -0,0 +1 @@
badge: New

51
docs/content/1.getting-started/7.i18n/1.nuxt.md
View File

@@ -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'
</template>
```
### 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]
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp dir="rtl" :locale="fr">
<NuxtPage />
</UApp>
</template>
```
### 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 `<html>` 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]
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)
useHead({
htmlAttrs: {
lang,
dir
}
})
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
```
## Supported languages
:supported-languages

54
docs/content/1.getting-started/7.i18n/2.vue.md
View File

@@ -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'
</template>
```
### 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]
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp dir="rtl" :locale="fr">
<RouterView />
</UApp>
</template>
```
### 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 `<html>` 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]
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)
useHead({
htmlAttrs: {
lang,
dir
}
})
</script>
<template>
<UApp :locale="locales[locale]">
<RouterView />
</UApp>
</template>
```
## Supported languages
:supported-languages