Vue

Vue projects are usually Vite projects, so the plugin is the least intrusive option — add it once and translation becomes part of the build.

Install

npm install -D vite-plugin-shipi18n @anthropic-ai/sdk
npm install vue-i18n

Configure the build

// vite.config.js
import vue from '@vitejs/plugin-vue'
import shipi18n from 'vite-plugin-shipi18n'

export default {
  plugins: [
    vue(),
    shipi18n({
      provider: 'anthropic',
      targetLanguages: ['es', 'fr'],
      sourceDir: 'src/locales/en',
      outputDir: 'src/locales',
    }),
  ],
}

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>

Interpolation syntax

vue-i18n uses single braces ({name}) rather than i18next's double braces. Both are recognised and preserved, so keep your source file in whichever syntax your runtime expects and it will come back unchanged.

Prefer the CLI?

If you would rather not translate on every build, drop the plugin and add an npm script instead — see the CLI reference.