@pico-intl-dev/vue

Vue 3 bindings for pico-intl.

Status: stable v1 for Vue apps covered by the published Vue + Vite adoption fixture. Nuxt-specific behavior is not part of the stable contract until a dedicated fixture lands.

Install

npm install @pico-intl-dev/core @pico-intl-dev/vue vue

Usage

import { createApp } from 'vue';
import { createI18n } from '@pico-intl-dev/core';
import { picoIntlPlugin } from '@pico-intl-dev/vue';

const i18n = createI18n({
  base: 'en',
  locale: 'en',
  messages: { greeting: 'Hello, {{name}}' },
});

createApp(App).use(picoIntlPlugin, { i18n }).mount('#app');

<script setup lang="ts">
import { useLocale, useT } from '@pico-intl-dev/vue';

const t = useT();
const { dir, locale, setLocale } = useLocale();
</script>

<template>
  <h1 :dir="dir">{{ t('greeting', { name: 'Ana' }) }}</h1>
  <button @click="setLocale(locale === 'en' ? 'es' : 'en')">Switch</button>
</template>

API

| Export | Purpose | | --- | --- | | picoIntlPlugin | Installs pico-intl into Vue app context | | useT() | Returns the translate function | | useLocale() | Returns computed current locale, dir, isRTL, and setLocale() | | useI18n() | Returns the raw PicoIntlInstance |

Production notes

• Call app.use(picoIntlPlugin, { i18n }) before using composables.
• App-level hydration and async locale loading should be tested in your Vue/Nuxt setup.

Verification

npm run build:all
npm run test:integration