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

feat(useLocale): handle generic messages (#3100)

Browse Source 
Co-authored-by: hywax <me@hywax.space>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2025-03-10 22:37:28 +05:00
committed by GitHub
parent 04fc367568
commit a9c8eb3f60
46 changed files with 369 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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'
</template>
```
:::
#ui-pro
:::div
Use the `locale` prop with the locale you want to use from `@nuxt/ui-pro/locale`:
```vue [app.vue]
<script setup lang="ts">
import { fr } from '@nuxt/ui-pro/locale'
</script>
<template>
<UApp :locale="fr">
<NuxtPage />
</UApp>
</template>
```
:::
::
### Custom locale
You also have the option to add your own locale using `defineLocale`:
::module-only
#ui
:::div
```vue [app.vue]
<script setup lang="ts">
const locale = defineLocale({
import type { Messages } from '@nuxt/ui'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
@@ -54,6 +88,35 @@ const locale = defineLocale({
</template>
```
:::
#ui-pro
:::div
```vue [app.vue]
<script setup lang="ts">
import type { Messages } from '@nuxt/ui-pro'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
```
:::
::
::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]
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
@@ -130,6 +198,28 @@ const { locale } = useI18n()
</template>
```
:::
#ui-pro
:::div
```vue [app.vue]
<script setup lang="ts">
import * as locales from '@nuxt/ui-pro/locale'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
```
:::
::
::
### 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 `<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:
::module-only
#ui
:::div
```vue [app.vue]
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
@@ -162,6 +257,38 @@ useHead({
</template>
```
:::
#ui-pro
:::div
```vue [app.vue]
<script setup lang="ts">
import * as locales from '@nuxt/ui-pro/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

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

@@ -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'
</template>
```
:::
#ui-pro
:::div
Use the `locale` prop with the locale you want to use from `@nuxt/ui-pro/locale`:
```vue [App.vue]
<script setup lang="ts">
import { fr } from '@nuxt/ui-pro/locale'
</script>
<template>
<UApp :locale="fr">
<RouterView />
</UApp>
</template>
```
:::
::
### Custom locale
You also have the option to add your locale using `defineLocale`:
::module-only
#ui
:::div
```vue [App.vue]
<script setup lang="ts">
import { defineLocale } from '@nuxt/ui/composables/defineLocale'
import type { Messages } from '@nuxt/ui'
import { defineLocale } from '@nuxt/ui/composables/defineLocale.js'
const locale = defineLocale({
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
@@ -56,6 +89,36 @@ const locale = defineLocale({
</template>
```
:::
#ui-pro
:::div
```vue [App.vue]
<script setup lang="ts">
import type { Messages } from '@nuxt/ui-pro'
import { defineLocale } from '@nuxt/ui/composables/defineLocale.js'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<RouterView />
</UApp>
</template>
```
:::
::
::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]
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
@@ -146,6 +214,29 @@ const { locale } = useI18n()
</template>
```
:::
#ui-pro
:::div
```vue [App.vue]
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui-pro/locale'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<RouterView />
</UApp>
</template>
```
:::
::
::
### 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 `<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:
::module-only
#ui
:::div
```vue [App.vue]
<script setup lang="ts">
import { computed } from 'vue'
@@ -181,6 +277,41 @@ useHead({
</template>
```
:::
#ui-pro
:::div
```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-pro/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

2
docs/package.json
View File

@@ -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",

26
pnpm-lock.yaml generated
View File

@@ -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

12
src/runtime/components/App.vue
View File

@@ -1,12 +1,11 @@
<script lang="ts">
import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
import { localeContextInjectionKey } from '../composables/useLocale'
import type { ToasterProps, Locale } from '../types'
import type { ToasterProps, Locale, Messages } from '../types'
export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
tooltip?: TooltipProviderProps
toaster?: ToasterProps | null
locale?: Locale
locale?: Locale<T>
}
export interface AppSlots {
@@ -18,14 +17,15 @@ export default {
}
</script>
<script setup lang="ts">
<script setup lang="ts" generic="T extends Messages = Messages">
import { toRef, useId, provide } from 'vue'
import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
import { reactivePick } from '@vueuse/core'
import { localeContextInjectionKey } from '../composables/useLocale'
import UToaster from './Toaster.vue'
import UOverlayProvider from './OverlayProvider.vue'
const props = defineProps<AppProps>()
const props = defineProps<AppProps<T>>()
defineSlots<AppSlots>()
const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))

10
src/runtime/composables/defineLocale.ts
View File

@@ -1,13 +1,13 @@
import { defu } from 'defu'
import type { Locale, Direction, Messages } from '../types/locale'
import type { Locale, Direction } from '../types/locale'
interface DefineLocaleOptions {
interface DefineLocaleOptions<M> {
name: string
code: string
dir?: Direction
messages: Messages
messages: M
}
export function defineLocale(options: DefineLocaleOptions): Locale {
return defu<DefineLocaleOptions, [{ dir: Direction }]>(options, { dir: 'ltr' })
export function defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M> {
return defu<DefineLocaleOptions<M>, [{ dir: Direction }]>(options, { dir: 'ltr' })
}

14
src/runtime/composables/useLocale.ts
View File

@@ -1,16 +1,16 @@
import { computed, inject, ref } from 'vue'
import { computed, inject, toRef } from 'vue'
import type { InjectionKey, Ref } from 'vue'
import type { Locale } from '../types/locale'
import { createSharedComposable } from '@vueuse/core'
import type { Locale, Messages } from '../types/locale'
import { buildLocaleContext } from '../utils/locale'
import en from '../locale/en'
import { createSharedComposable } from '@vueuse/core'
export const localeContextInjectionKey: InjectionKey<Ref<Locale | undefined>> = Symbol('nuxt-ui.locale-context')
export const localeContextInjectionKey: InjectionKey<Ref<Locale<unknown> | undefined>> = Symbol('nuxt-ui.locale-context')
const _useLocale = (localeOverrides?: Ref<Locale | undefined>) => {
const locale = localeOverrides || inject(localeContextInjectionKey, ref())!
const _useLocale = (localeOverrides?: Ref<Locale<Messages> | undefined>) => {
const locale = localeOverrides || toRef(inject<Locale<Messages>>(localeContextInjectionKey))
return buildLocaleContext(computed(() => locale.value || en))
return buildLocaleContext<Messages>(computed(() => locale.value || en))
}
export const useLocale = createSharedComposable(_useLocale)

3
src/runtime/locale/ar.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'العربية',
code: 'ar',
dir: 'rtl',

3
src/runtime/locale/az.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Azərbaycanca',
code: 'az',
messages: {

3
src/runtime/locale/bn.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'বাংলা',
code: 'bn',
messages: {

3
src/runtime/locale/cs.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Čeština',
code: 'cs',
messages: {

3
src/runtime/locale/da.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Danish',
code: 'da',
messages: {

3
src/runtime/locale/de.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Deutsch',
code: 'de',
messages: {

3
src/runtime/locale/el.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Ελληνικά',
code: 'el',
messages: {

3
src/runtime/locale/en.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'English',
code: 'en',
messages: {

3
src/runtime/locale/es.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Español',
code: 'es',
messages: {

3
src/runtime/locale/et.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Eesti',
code: 'et',
messages: {

3
src/runtime/locale/fa_ir.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'فارسی',
code: 'fa-IR',
dir: 'rtl',

3
src/runtime/locale/fi.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Suomeksi',
code: 'fi',
messages: {

3
src/runtime/locale/fr.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Français',
code: 'fr',
messages: {

3
src/runtime/locale/he.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Hebrew',
code: 'he',
dir: 'rtl',

3
src/runtime/locale/hi.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Hindi',
code: 'hi',
messages: {

3
src/runtime/locale/hu.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Magyar',
code: 'hu',
messages: {

3
src/runtime/locale/id.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Indonesia',
code: 'id',
messages: {

5
src/runtime/locale/index.ts
View File

@@ -5,13 +5,15 @@ export { default as cs } from './cs'
export { default as da } from './da'
export { default as de } from './de'
export { default as el } from './el'
export { default as et } from './et'
export { default as en } from './en'
export { default as es } from './es'
export { default as et } from './et'
export { default as fa_ir } from './fa_ir'
export { default as fi } from './fi'
export { default as fr } from './fr'
export { default as he } from './he'
export { default as hi } from './hi'
export { default as hu } from './hu'
export { default as id } from './id'
export { default as it } from './it'
export { default as ja } from './ja'
@@ -31,4 +33,3 @@ export { default as uk } from './uk'
export { default as vi } from './vi'
export { default as zh_cn } from './zh_cn'
export { default as zh_tw } from './zh_tw'
export { default as he } from './he'

3
src/runtime/locale/it.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Italiano',
code: 'it',
messages: {

3
src/runtime/locale/ja.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: '日本語',
code: 'ja',
messages: {

3
src/runtime/locale/km.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'ភាសាខ្មែរ',
code: 'km',
messages: {

3
src/runtime/locale/ko.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: '한국어',
code: 'ko',
messages: {

3
src/runtime/locale/nb_no.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Norsk Bokmål',
code: 'nb-NO',
messages: {

3
src/runtime/locale/nl.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Nederlands',
code: 'nl',
messages: {

3
src/runtime/locale/pl.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Polski',
code: 'pl',
messages: {

3
src/runtime/locale/pt.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Português',
code: 'pt',
messages: {

3
src/runtime/locale/pt_br.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Português (Brasil)',
code: 'pt-BR',
messages: {

3
src/runtime/locale/ru.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Русский',
code: 'ru',
messages: {

3
src/runtime/locale/sk.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Slovenčina',
code: 'sk',
messages: {

3
src/runtime/locale/sv.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Svenska',
code: 'sv',
messages: {

3
src/runtime/locale/th.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'ไทย',
code: 'th',
messages: {

3
src/runtime/locale/tr.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Türkçe',
code: 'tr',
messages: {

3
src/runtime/locale/uk.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Українська',
code: 'uk',
messages: {

3
src/runtime/locale/vi.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: 'Tiếng Việt',
code: 'vi',
messages: {

3
src/runtime/locale/zh_cn.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: '简体中文',
code: 'zh-CN',
messages: {

3
src/runtime/locale/zh_tw.ts
View File

@@ -1,6 +1,7 @@
import type { Messages } from '../types'
import { defineLocale } from '../composables/defineLocale'
export default defineLocale({
export default defineLocale<Messages>({
name: '繁體中文',
code: 'zh-TW',
messages: {

4
src/runtime/types/locale.ts
View File

@@ -50,9 +50,9 @@ export type Messages = {
export type Direction = 'ltr' | 'rtl'
export type Locale = {
export type Locale<M> = {
name: string
code: string
dir: Direction
messages: Messages
messages: M
}

12
src/runtime/utils/locale.ts
View File

@@ -6,19 +6,19 @@ import { get } from './index'
export type TranslatorOption = Record<string, string | number>
export type Translator = (path: string, option?: TranslatorOption) => string
export type LocaleContext = {
locale: Ref<Locale>
export type LocaleContext<M> = {
locale: Ref<Locale<M>>
lang: Ref<string>
dir: Ref<Direction>
code: Ref<string>
t: Translator
}
export function buildTranslator(locale: MaybeRef<Locale>): Translator {
export function buildTranslator<M>(locale: MaybeRef<Locale<M>>): Translator {
return (path, option) => translate(path, option, unref(locale))
}
export function translate(path: string, option: undefined | TranslatorOption, locale: Locale): string {
export function translate<M>(path: string, option: undefined | TranslatorOption, locale: Locale<M>): string {
const prop: string = get(locale, `messages.${path}`, path)
return prop.replace(
@@ -27,11 +27,11 @@ export function translate(path: string, option: undefined | TranslatorOption, lo
)
}
export function buildLocaleContext(locale: MaybeRef<Locale>): LocaleContext {
export function buildLocaleContext<M>(locale: MaybeRef<Locale<M>>): LocaleContext<M> {
const lang = computed(() => unref(locale).name)
const code = computed(() => unref(locale).code)
const dir = computed(() => unref(locale).dir)
const localeRef = isRef(locale) ? locale : ref(locale)
const localeRef = isRef(locale) ? locale : ref(locale) as Ref<Locale<M>>
return {
lang,

1
src/runtime/vue/stubs.ts
View File

@@ -9,6 +9,7 @@ export { useHead } from '@unhead/vue'
export { useRoute, useRouter } from 'vue-router'
export { defineShortcuts } from '../composables/defineShortcuts'
export { defineLocale } from '../composables/defineLocale'
export { useLocale } from '../composables/useLocale'
export const useColorMode = () => {