Looking for the Vue version?
Nuxt UI provides an App component that wraps your app to provide global configurations.
Use the locale prop with the locale you want to use from @nuxt/ui/locale:
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp :locale="fr">
<NuxtPage />
</UApp>
</template>
You can create your own locale using the defineLocale composable:
<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>
Look at the code 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)You can customize an existing locale by overriding its messages or code using the extendLocale composable:
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
const locale = extendLocale(en, {
code: 'en-GB',
messages: {
commandPalette: {
placeholder: 'Search a component...'
}
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
To dynamically switch between languages, you can use the Nuxt I18n module.
pnpm add @nuxtjs/i18n
yarn add @nuxtjs/i18n
npm install @nuxtjs/i18n
bun add @nuxtjs/i18n
nuxt.config.tsexport default defineNuxtConfig({
modules: [
'@nuxt/ui',
'@nuxtjs/i18n'
],
css: ['~/assets/css/main.css'],
i18n: {
locales: [{
code: 'de',
name: 'Deutsch'
}, {
code: 'en',
name: 'English'
}, {
code: 'fr',
name: 'Français'
}]
}
})
locale prop using useI18n<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
Each locale has a dir property which will be used by the App component to set the directionality of all components.
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 composable:
<script setup lang="ts">
import * as locales from '@nuxt/ui/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>
By default, the en locale is used.
arazbgbncackbcsdadede-CHelenesetfa-IRfifrhehihrhuhyiditjakakkkmkokylbltmnmsnb-NOnlplptpt-BRroruskslsvthtjtrug-CNukuruzvizh-CNzh-TWsrc/runtime/locale/. nuxt-ui CLI to create a new locale: nuxt-ui make locale --code "en" --name "English"