feat(locale): provide code (#2611)

cli/commands/make/locale.mjs

@@ -1,7 +1,7 @@
 import { existsSync, promises as fsp } from 'node:fs'
 import { resolve } from 'pathe'
 import { consola } from 'consola'
-import { appendFile, sortFile } from '../../utils.mjs'
+import { appendFile, sortFile, normalizeLocale } from '../../utils.mjs'
 import { defineCommand } from 'citty'
 
 export default defineCommand({
@@ -45,7 +45,7 @@ export default defineCommand({
     // Create new locale file
     await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
     const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
-    const rewrittenLocaleFile = localeFile.replace(/defineLocale\('(.*)'/, `defineLocale('${args.name}'`)
+    const rewrittenLocaleFile = localeFile.replace(/defineLocale\('(.*)'/, `defineLocale('${args.name}', '${normalizeLocale(args.code)}'`)
     await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
 
     consola.success(`🪄 Generated ${newLocaleFilePath}`)

cli/utils.mjs

@@ -15,3 +15,17 @@ export async function appendFile(path, contents) {
     await fsp.writeFile(path, file.trim() + '\n' + contents + '\n')
   }
 }
+
+export function normalizeLocale(locale) {
+  if (!locale) {
+    return ''
+  }
+
+  if (locale.includes('_')) {
+    return locale.split('_')
+      .map((part, index) => index === 0 ? part.toLowerCase() : part.toUpperCase())
+      .join('-')
+  }
+
+  return locale.toLowerCase()
+}

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

@@ -38,7 +38,7 @@ 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', {
+const locale = defineLocale('My custom locale', 'en', {
   // implement pairs
 })
 </script>
@@ -50,6 +50,12 @@ const locale = defineLocale('My custom locale', {
 </template>
 ```
 
+::tip
+Look at the second 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)
+::
+
 ### Dynamic locale
 
 To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.

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

@@ -40,7 +40,7 @@ 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', {
+const locale = defineLocale('My custom locale', 'en', {
   // implement pairs
 })
 </script>
@@ -52,6 +52,12 @@ const locale = defineLocale('My custom locale', {
 </template>
 ```
 
+::tip
+Look at the second 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)
+::
+
 ### Dynamic locale
 
 To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.

src/runtime/composables/defineLocale.ts

@@ -1,8 +1,9 @@
 import type { Locale, LocalePair } from '../types/locale'
 
-export function defineLocale(name: string, pair: LocalePair): Locale {
+export function defineLocale(name: string, code: string, pair: LocalePair): Locale {
   return {
     name,
+    code,
     ui: pair
   }
 }

src/runtime/locale/ar.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('العربية', {
+export default defineLocale('العربية', 'ar', {
   inputMenu: {
     noMatch: 'لا توجد نتائج مطابقة',
     noData: 'لا توجد بيانات'

src/runtime/locale/cs.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Čeština', {
+export default defineLocale('Čeština', 'cs', {
   inputMenu: {
     noMatch: 'Žádná shoda',
     noData: 'Žádná data'

src/runtime/locale/de.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Deutsch', {
+export default defineLocale('Deutsch', 'de', {
   inputMenu: {
     noMatch: 'Nichts gefunden',
     noData: 'Keine Daten'

src/runtime/locale/en.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('English', {
+export default defineLocale('English', 'en', {
   inputMenu: {
     noMatch: 'No matching data',
     noData: 'No data'

src/runtime/locale/fr.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Français', {
+export default defineLocale('Français', 'fr', {
   inputMenu: {
     noMatch: 'Aucune donnée correspondante',
     noData: 'Aucune donnée'

src/runtime/locale/it.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Italiano', {
+export default defineLocale('Italiano', 'it', {
   inputMenu: {
     noMatch: 'Nessun dato corrispondente',
     noData: 'Nessun dato'

src/runtime/locale/ru.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('Русский', {
+export default defineLocale('Русский', 'ru', {
   inputMenu: {
     noMatch: 'Совпадений не найдено',
     noData: 'Нет данных'

src/runtime/locale/zh_hans.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('简体中文', {
+export default defineLocale('简体中文', 'zh-Hans', {
   inputMenu: {
     noMatch: '没有匹配的数据',
     noData: '没有数据'

src/runtime/locale/zh_hant.ts

@@ -1,6 +1,6 @@
 import { defineLocale } from '../composables/defineLocale'
 
-export default defineLocale('繁体中文', {
+export default defineLocale('繁体中文', 'zh-Hant', {
   inputMenu: {
     noMatch: '沒有匹配的資料',
     noData: '沒有資料'

src/runtime/types/locale.ts

@@ -36,5 +36,6 @@ export type LocalePair = {
 
 export type Locale = {
   name: string
+  code: string
   ui: LocalePair
 }

src/runtime/utils/locale.ts

@@ -9,6 +9,7 @@ export type Translator = (path: string, option?: TranslatorOption) => string
 export type LocaleContext = {
   locale: Ref<Locale>
   lang: Ref<string>
+  code: Ref<string>
   t: Translator
 }
 
@@ -27,10 +28,12 @@ export function translate(path: string, option: undefined | TranslatorOption, lo
 
 export function buildLocaleContext(locale: MaybeRef<Locale>): LocaleContext {
   const lang = computed(() => unref(locale).name)
+  const code = computed(() => unref(locale).code)
   const localeRef = isRef(locale) ? locale : ref(locale)
 
   return {
     lang,
+    code,
     locale: localeRef,
     t: buildTranslator(locale)
   }