definieerLocale
Een hulpprogramma om een aangepaste landinstelling voor uw app te maken.
Gebruik
Gebruik het automatisch geïmporteerde hulpprogramma defineLocale om een aangepaste landinstelling te maken met uw eigen vertalingen.
<script setup lang="ts">
import type { Messages } from '@nuxt/ui'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
API
defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>
Maakt een nieuw locale-object met de geboden opties.
Parameters
options
DefineLocaleOptions<M> required
Het locale configuratieobject met de volgende eigenschappen:
name
string required
De weergavenaam van de landinstelling (bijv.
'English', 'Français').code
string required
De ISO-code van de landinstelling (bijv.
'en', 'fr', 'de-AT').dir
'ltr' | 'rtl'
De tekstrichting van de landinstelling. Standaard
'ltr'.messages
M required
Het object vertaalberichten. Gebruik het
Messages-type van @nuxt/ui voor typeveiligheid.**Returns: ** Een Locale<M> object dat kan worden doorgegeven aan de locale prop van de App component.
Voorbeeld
Hier is een compleet voorbeeld van het maken van een aangepaste landinstelling:
<script setup lang="ts">
import type { Messages } from '@nuxt/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>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
U kunt de built-in locales bekijken voor referentie over hoe u het berichtenobject kunt structureren.