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, including the locale prop.

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

Each locale has a code property (e.g. en, en-GB, fr) that determines the date/time format in components like Calendar, InputDate and InputTime.

Custom locale

You can create your own locale using the defineLocale utility:

app.vue

<script setup lang="ts">
import type { Messages } from 'pohon-ui';

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

<template>
  <PApp :locale="locale">
    <NuxtPage />
  </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 { en } from 'pohon-ui/locale';

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

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

Dynamic locale

To dynamically switch between languages, you can use the Nuxt I18n module.

Install the Nuxt I18n package

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

Add the Nuxt I18n module in your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'pohon-ui',
    '@nuxtjs/i18n'
  ],
  css: ['~/assets/css/main.css'],
  i18n: {
    locales: [
      {
        code: 'de',
        name: 'Deutsch'
      },
      {
        code: 'en',
        name: 'English'
      },
      {
        code: 'fr',
        name: 'Français'
      }
    ]
  }
});

Automatic locale

When @nuxtjs/i18n is installed, the App component follows the current i18n locale. Only the Pohon UI locales matching your i18n.locales are bundled:

app.vue

<template>
  <PApp>
    <NuxtPage />
  </PApp>
</template>

Each locale is matched using its language or code, falling back to the base language (for example, pt-BR uses pt_br and en-US uses en). A locale without a match falls back to English. Set the locale prop to override it, for example with a custom locale.

Automatic link localization

When @nuxtjs/i18n is installed, the Link component automatically localizes internal links using the $localePath helper. This means you don't need to manually wrap your links with localePath() or localeRoute().

<template>
  <!-- Automatically becomes /en/about or /fr/about based on current locale -->
  <PLink to="/about">
    About
  </PLink>
  <PButton to="/contact">
    Contact
  </PButton>
</template>

External links and absolute URLs are automatically detected and skip localization. You can still manually use localePath() or localeRoute() if needed.

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 useLocaleHead composable. It reads language and dir from your i18n.locales:

nuxt.config.ts

export default defineNuxtConfig({
  i18n: {
    locales: [
      {
        code: 'ar',
        language: 'ar',
        dir: 'rtl',
        name: 'العربية'
      },
      {
        code: 'en',
        language: 'en',
        name: 'English'
      }
    ]
  }
});

app.vue

<script setup lang="ts">
const head = useLocaleHead();

useHead(() => ({
  htmlAttrs: head.value.htmlAttrs
}));
</script>

<template>
  <PApp>
    <NuxtPage />
  </PApp>
</template>

With experimental.strictSeo enabled, @nuxtjs/i18n sets these attributes itself and useLocaleHead must not be called.

Supported languages

By default, the en locale is used.

🇸🇦

العربية

Code: ar

🇦🇿

Azərbaycanca

Code: az

🇧🇾

Беларуская

Code: be

🇧🇬

Български

Code: bg

🇧🇩

বাংলা

Code: bn

🇪🇸

Català

Code: ca

🇮🇶

کوردی

Code: ckb

🇨🇿

Čeština

Code: cs

🇩🇰

Dansk

Code: da

🇩🇪

Deutsch

Code: de

🇦🇹

Deutsch (Österreich)

Code: de-AT

🇨🇭

Schweizer Hochdeutsch

Code: de-CH

🇬🇷

Ελληνικά

Code: el

🇺🇸

English

Code: en

🇬🇧

English (United Kingdom)

Code: en-GB

🇪🇸

Español

Code: es

🇪🇪

Eesti

Code: et

🇪🇸

Euskara

Code: eu

🇮🇷

فارسی

Code: fa-IR

🇫🇮

Suomi

Code: fi

🇫🇷

Français

Code: fr

🇪🇸

Galego

Code: gl

🇮🇱

עברית

Code: he

🇮🇳

हिन्दी

Code: hi

🇭🇷

Hrvatski

Code: hr

🇭🇺

Magyar

Code: hu

🇦🇲

Հայերեն

Code: hy

🇮🇩

Bahasa Indonesia

Code: id

🇮🇸

Íslenska

Code: is

🇮🇹

Italiano

Code: it

🇯🇵

日本語

Code: ja

🇬🇪

ქართული

Code: ka

🇰🇿

Қазақша

Code: kk

🇰🇭

ភាសាខ្មែរ

Code: km

🇰🇷

한국어

Code: ko

🇰🇬

Кыргызча

Code: ky

🇱🇺

Lëtzebuergesch

Code: lb

🇱🇦

ລາວ

Code: lo

🇱🇹

Lietuvių

Code: lt

🇱🇻

Latviešu

Code: lv

🇲🇳

Монгол

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

🇦🇱

Shqip

Code: sq

🇸🇪

Svenska

Code: sv

🇹🇬

Тоҷикӣ

Code: tg

🇹🇭

ไทย

Code: th

🇹🇷

Türkçe

Code: tr

🇨🇳

ئۇيغۇرچە

Code: ug-CN

🇺🇦

Українська

Code: uk

🇵🇰

اردو

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/.

Color Mode

Pohon UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.

Content

Pohon UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.