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

feat(locale): provide dir on defineLocale (#2620)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2024-11-13 16:19:21 +05:00
committed by GitHub
parent 9c00f7c7b7
commit 937585cb3f
26 changed files with 467 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,11 +12,13 @@ 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,14 +34,36 @@ 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`:
```vue [app.vue]
<script setup lang="ts">
const locale = defineLocale('My custom locale', 'en', {
// implement pairs
const locale = defineLocale({
name: 'My custom locale',
code: 'en',
messages: {
// implement pairs
}
})
</script>
@@ -51,7 +75,7 @@ const locale = defineLocale('My custom locale', 'en', {
```
::tip
Look at the second parameter, there you need to pass the iso code of the language. Example:
Look at the `code` parameter, there you need to pass the iso code of the language. Example:
* `hi` Hindi (language)
* `de-AT`: German (language) as used in Austria (region)
::
@@ -125,65 +149,6 @@ const { locale } = useI18n()
::
### Supported languages
## Supported languages
:supported-languages
## Direction
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
```vue [app.vue]
<template>
<UApp dir="rtl">
<NuxtPage />
</UApp>
</template>
```
### Dynamic direction
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.
::steps{level="4"}
#### Install the `@vueuse/core` package
::code-group{sync="pm"}
```bash [pnpm]
pnpm add @vueuse/core
```
```bash [yarn]
yarn add @vueuse/core
```
```bash [npm]
npm install @vueuse/core
```
```bash [bun]
bun add @vueuse/core
```
::
#### Set the `dir` prop using `useTextDirection`
```vue [app.vue]
<script setup lang="ts">
import { useTextDirection } from '@vueuse/core'
const textDirection = useTextDirection({ initialValue: 'ltr' })
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>
<template>
<UApp :dir="dir">
<NuxtPage />
</UApp>
</template>
```
::

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

@@ -12,11 +12,13 @@ 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,6 +34,24 @@ 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`:
@@ -40,8 +60,12 @@ You also have the option to add your locale using `defineLocale`:
<script setup lang="ts">
import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale'
const locale = defineLocale('My custom locale', 'en', {
// implement pairs
const locale = defineLocale({
name: 'My custom locale',
code: 'en',
messages: {
// implement pairs
}
})
</script>
@@ -53,7 +77,7 @@ const locale = defineLocale('My custom locale', 'en', {
```
::tip
Look at the second parameter, there you need to pass the iso code of the language. Example:
Look at the `code` parameter, there you need to pass the iso code of the language. Example:
* `hi` Hindi (language)
* `de-AT`: German (language) as used in Austria (region)
::
@@ -138,61 +162,3 @@ const { locale } = useI18n()
## Supported languages
:supported-languages
## Direction
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
```vue [App.vue]
<template>
<UApp dir="rtl">
<NuxtPage />
</UApp>
</template>
```
### Dynamic direction
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.
::steps{level="4"}
#### Install the `@vueuse/core` package
::code-group{sync="pm"}
```bash [pnpm]
pnpm add @vueuse/core
```
```bash [yarn]
yarn add @vueuse/core
```
```bash [npm]
npm install @vueuse/core
```
```bash [bun]
bun add @vueuse/core
```
::
#### Set the `dir` prop using `useTextDirection`
```vue [App.vue]
<script setup lang="ts">
import { computed } from 'vue'
import { useTextDirection } from '@vueuse/core'
const textDirection = useTextDirection()
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>
<template>
<UApp :dir="dir">
<RouterView />
</UApp>
</template>
```