Internationalization (i18n)

Pohon UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.

Usage

Pohon UI provides an App component that wraps your app to provide global configurations.

Locale

Use the locale prop with the locale you want to use from pohon-ui/locale:

App.vue

<script setup lang="ts">
import { fr } from 'pohon-ui/locale';
</script>

<template>
  <PApp :locale="fr">
    <RouterView />
  </PApp>
</template>

Custom locale

You can create your own locale using the defineLocale utility:

App.vue

<script setup lang="ts">
import type { PMessages } from 'pohon-ui';
import { defineLocale } from 'pohon-ui/composables/defineLocale';

const locale = defineLocale<PMessages>({
  name: 'My custom locale',
  code: 'en',
  dir: 'ltr',
  messages: {
    // implement pairs
  }
});
</script>

<template>
  <PApp :locale="locale">
    <RouterView />
  </PApp>
</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)

Extend locale

You can customize an existing locale by overriding its messages or code using the extendLocale utility:

App.vue

<script setup lang="ts">
import { extendLocale } from 'pohon-ui/composables/defineLocale';
import { en } from 'pohon-ui/locale';

const locale = extendLocale(en, {
  code: 'en-GB',
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
});
</script>

<template>
  <PApp :locale="locale">
    <RouterView />
  </PApp>
</template>

Dynamic locale

To dynamically switch between languages, you can use the Vue I18n plugin.

Install the Vue I18n package

pnpm add vue-i18n@11

npm install vue-i18n@11

bun add vue-i18n@11

Use the Vue I18n plugin in your `main.ts`

main.ts

import pohon from 'pohon-ui/vue-plugin';
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

const app = createApp(App);

const router = createRouter({
  routes: [],
  history: createWebHistory()
});

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages: {
    en: {
      // ...
    },
    de: {
      // ...
    }
  }
});

app.use(router);
app.use(i18n);
app.use(pohon);

app.mount('#app');

Set the `locale` prop using `useI18n`

App.vue

<script setup lang="ts">
import * as locales from 'pohon-ui/locale';
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();
</script>

<template>
  <PApp :locale="locales[locale]">
    <RouterView />
  </PApp>
</template>

Dynamic direction

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:

App.vue

<script setup lang="ts">
import { useHead } from '@unhead/vue';
import * as locales from 'pohon-ui/locale';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

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]">
    <RouterView />
  </PApp>
</template>

Supported languages

By default, the en locale is used.

🇸🇦

العربية

Code: ar

🇦🇿

Azərbaycanca

Code: az

🇧🇬

Български

Code: bg

🇧🇩

বাংলা

Code: bn

🇪🇸

Català

Code: ca

🇮🇶

کوردی

Code: ckb

🇨🇿

Čeština

Code: cs

🇩🇰

Danish

Code: da

🇩🇪

Deutsch

Code: de

🇨🇭

Schweizerdeutsch

Code: de-CH

🇬🇷

Ελληνικά

Code: el

🇬🇧

English

Code: en

🇪🇸

Español

Code: es

🇪🇪

Eesti

Code: et

🇮🇷

فارسی

Code: fa-IR

🇫🇮

Suomeksi

Code: fi

🇫🇷

Français

Code: fr

🇮🇱

Hebrew

Code: he

🇮🇳

Hindi

Code: hi

🇭🇺

Magyar

Code: hu

🇦🇲

Հայերեն

Code: hy

🇮🇩

Bahasa Indonesia

Code: id

🇮🇹

Italiano

Code: it

🇯🇵

日本語

Code: ja

🇬🇪

ქართული

Code: ka

🇰🇿

Қазақша

Code: kk

🇰🇭

ភាសាខ្មែរ

Code: km

🇰🇷

한국어

Code: ko

🇰🇬

Кыргызча

Code: ky

🇱🇺

Lëtzebuergesch

Code: lb

🇱🇹

Lietuvių

Code: lt

🇲🇳

Монгол

Code: mn

🇲🇾

Melayu

Code: ms

🇳🇴

Norsk Bokmål

Code: nb-NO

🇳🇱

Nederlands

Code: nl

🇵🇱

Polski

Code: pl

🇵🇹

Português

Code: pt

🇧🇷

Português (Brasil)

Code: pt-BR

🇷🇴

Română

Code: ro

🇷🇺

Русский

Code: ru

🇸🇰

Slovenčina

Code: sk

🇸🇮

Slovenščina

Code: sl

🇸🇪

Svenska

Code: sv

🇹🇭

ไทย

Code: th

🇹🇯

Тоҷикӣ

Code: tj

🇹🇷

Türkçe

Code: tr

🇨🇳

ئۇيغۇرچە

Code: ug-CN

🇺🇦

Українська

Code: uk

🇵🇰

Urdu

Code: ur

🇺🇿

Oʻzbek

Code: uz

🇻🇳

Tiếng Việt

Code: vi

🇨🇳

简体中文

Code: zh-CN

🇹🇼

繁體中文

Code: zh-TW

If you need additional languages, you can contribute by creating a PR to add a new locale in src/runtime/locale/.

You can use the nuxt-ui CLI to create a new locale:

nuxt-ui make locale --code "en" --name "English"