defineLocale
A utility to create a custom locale for your app.
Usage
Use the defineLocale utility to create a custom locale with your own translations.
<script setup lang="ts">
import type { Messages } from 'pohon-ui';
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
});
</script>
<template>
<PApp :locale="locale">
<NuxtPage />
</PApp>
</template>
API
defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>
Creates a new locale object with the provided options.
Parameters
options
DefineLocaleOptions<M> required
The locale configuration object with the following properties:
name
string required
The display name of the locale (e.g.,
'English', 'Français').code
string required
The ISO code of the locale (e.g.,
'en', 'fr', 'de-AT').dir
'ltr' | 'rtl'
The text direction of the locale. Defaults to
'ltr'.messages
M required
The translation messages object. Use the
Messages type from pohon-ui for type safety.Returns: A Locale<M> object that can be passed to the locale prop of the App component.
Example
Here's a complete example of creating a custom locale:
<script setup lang="ts">
import type { Messages } from 'pohon-ui';
const locale = defineLocale<Messages>({
name: 'Español',
code: 'es',
dir: 'ltr',
messages: {
alert: {
close: 'Cerrar'
},
modal: {
close: 'Cerrar'
},
commandPalette: {
back: 'Atrás',
close: 'Cerrar',
noData: 'Sin datos',
noMatch: 'Sin resultados',
placeholder: 'Escribe un comando o busca…'
}
// ... other component messages
}
});
</script>
<template>
<PApp :locale="locale">
<NuxtPage />
</PApp>
</template>
You can look at the built-in locales for reference on how to structure the messages object.