@lingui/vue

Vue 3 bindings for Lingui i18n: I18nProvider, Trans and useLingui, with compile-time macros for templates and JSX

@lingui/vue is part of Lingui. Lingui is a lightweight, open-source internationalization (i18n) library for JavaScript and TypeScript. It brings compile-time macros and a CLI for message extraction to React, React Native, Vue, SolidJS, Astro, Svelte, and Node.js.

The package brings the Lingui workflow to Vue 3, single-file components included:

• @lingui/vue exports I18nProvider, Trans, useLingui and the createLingui app plugin.
• @lingui/vue/compiler exports a Vue template transform that compiles <Trans>, <Plural>, <Select>, <SelectOrdinal> and t`...` inside <template> blocks into ICU messages with precomputed IDs.
• @lingui/vue/vite exports linguiVue(), a Vite plugin that registers the template transform in @vitejs/plugin-vue and runs the Lingui Babel macro on <script setup>, .ts and .js modules.
• @lingui/vue/macro exports the Trans, Plural, Select, SelectOrdinal and useLingui macros for JSX/TSX.
• @lingui/vue/config exports defineConfig, which applies the Vue-specific settings to the Lingui configuration.

Installation

npm install @lingui/core @lingui/vue
npm install --save-dev @lingui/cli @lingui/vite-plugin @lingui/extractor-vue

@lingui/core provides the i18n instance passed to the provider, @lingui/extractor-vue extracts messages from .vue files.

Vue 3.4 or later is required.

Usage

<script setup lang="ts">
import { Trans, Plural, useLingui } from "@lingui/vue/macro"

defineProps<{ name: string; count: number }>()

const { t } = useLingui()
</script>

<template>
  <h1>
    <Trans>Hello <b>{{ name }}</b>, read the <a href="/docs">docs</a>.</Trans>
  </h1>
  <p><Plural :value="count" one="# message" other="# messages" /></p>
  <input :placeholder="t`Search`" />
</template>

See the Vue tutorial and the Vue reference.

License

This package is licensed under the MIT license.