Skip to main content

Vue Integration

Translate locale files at build time and load them with vue-i18n.

View on GitHub

Features

Works with Vue 3 and vue-i18n
Use the CLI or the Vite plugin — Vue projects usually have Vite already
Named interpolation is preserved
No runtime dependency on Shipi18n

Prerequisites

  • 1.Vue 3 with vue-i18n
  • 2.An LLM API key used at build time only

Installation

npm install -D vite-plugin-shipi18n
npm install vue-i18n

Configuration

Because Vue projects are usually Vite projects, the plugin is the least intrusive option — add it to vite.config.js and translation becomes part of the build:

import shipi18n from 'vite-plugin-shipi18n'

export default {
  plugins: [
    shipi18n({ provider: 'anthropic', targetLanguages: ['es', 'fr'] }),
  ],
}

Usage

const { t } = useI18n(); return t('greeting', { name })

Examples

Set up vue-i18n

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import es from './locales/es.json'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, es },
})

app.use(i18n)

Use it in a component

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<template>
  <p>{{ t('greeting', { name: 'Ada' }) }}</p>
</template>

Best Practices

  • Prefer the Vite plugin over a separate script — one less thing to remember in CI.
  • Commit generated locale files.
  • Keep the source locale as the single place strings are written.

Troubleshooting

vue-i18n warns about a missing message

The key exists in the source but not yet in that locale. Re-run the build so the plugin translates it.

Interpolation renders literally

vue-i18n uses {name} rather than {{name}}. Keep the source file in vue-i18n syntax and it will be preserved as-is.

Need help? Read the docs

View on GitHub