Use the extendLocale utility to customize an existing locale by overriding specific properties or messages.
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
const locale = extendLocale(en, {
code: 'en-AU',
messages: {
commandPalette: {
placeholder: 'Search a component...'
}
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
This is useful when you want to:
en-AU from en)extendLocale<M>(locale: Locale<M>, options: Partial<DefineLocaleOptions<DeepPartial<M>>>): Locale<M>
Extends an existing locale with the provided options, deeply merging the messages.
@nuxt/ui/locale.'en-GB', 'fr-CA').Returns: A new Locale<M> object with the merged properties.
Here's an example extending the English locale for an Australian variant:
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
const locale = extendLocale(en, {
name: 'English (Australia)',
code: 'en-AU',
messages: {
colorMode: {
dark: 'Dark',
light: 'Light',
system: 'System'
},
selectMenu: {
search: 'Search…',
noData: 'No results found',
noMatch: 'No matching results'
}
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
extendLocale utility uses deep merging, so you only need to specify the messages you want to override. All other messages will be inherited from the base locale.