Use the locale prop with the locale you want to use from pohon-ui/locale:
<script setup lang="ts">
import { fr } from 'pohon-ui/locale'
</script>
<template>
<PApp :locale="fr">
<NuxtPage />
</PApp>
</template>
You can create your own locale using the defineLocale composable:
<script setup lang="ts">
import type { PMessages } from 'pohon-ui'
const locale = defineLocale<PMessages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<PApp :locale="locale">
<NuxtPage />
</PApp>
</template>
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 'pohon-ui/locale'
const locale = extendLocale(en, {
code: 'en-GB',
messages: {
commandPalette: {
placeholder: 'Search a component...'
}
}
})
</script>
<template>
<PApp :locale="locale">
<NuxtPage />
</PApp>
</template>
To dynamically switch between languages, you can use the Nuxt I18n module.
pnpm add @nuxtjs/i18n
npm install @nuxtjs/i18n
bun add @nuxtjs/i18n
nuxt.config.tsexport default defineNuxtConfig({
modules: [
'pohon-ui',
'@nuxtjs/i18n'
],
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 'pohon-ui/locale';
const { locale } = useI18n();
</script>
<template>
<PApp :locale="locales[locale]">
<NuxtPage />
</PApp>
</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 'pohon-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>
<PApp :locale="locales[locale]">
<NuxtPage />
</PApp>
</template>
By default, the en locale is used.
arazbgbncackbcsdadede-CHelenesetfa-IRfifrhehihuhyiditjakakkkmkokylbltmnmsnb-NOnlplptpt-BRroruskslsvthtjtrug-CNukuruzvizh-CNzh-TWsrc/runtime/locale/. nuxt-ui CLI to create a new locale: nuxt-ui make locale --code "en" --name "English"