Lingo.dev Docs

Appearance

Translate Vue Single-File Components ​

Simplify Vue.js localization with Lingo.dev's direct support for Vue I18n single-file components - no separate translation files needed.

Quick Setup ​

Create an i18n.json configuration file in your project root:

json
{
  "version": 1,
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/**/*.vue"]
    }
  }
}

This configuration:

  • Sets English as your source language
  • Targets Spanish, French, and German translations
  • Processes all .vue files in your src directory and subdirectories

Find Supported Languages ​

Discover all available language options:

bash
# View source language options
npx lingo.dev@latest show locale sources

# View target language options
npx lingo.dev@latest show locale targets

One Command Translation ​

Translate all your Vue components with a single command:

bash
npx lingo.dev@latest i18n

This automatically:

  1. Scans your Vue components for <i18n> blocks
  2. Identifies new or modified content
  3. Translates only what's changed
  4. Updates translations directly in your components

How It Works with Vue Components ​

Lingo.dev works directly with Vue's standard i18n structure:

vue
<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

After translation, your component will contain all target languages:

vue
<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

Advanced Configuration Options ​

Exclude Specific Components ​

Keep certain components untranslated:

json
"vue-json": {
  "include": ["src/**/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

Hybrid Translation Approach ​

Combine component-based and file-based translations:

json
"buckets": {
  "vue-json": {
    "include": ["src/**/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

This setup allows you to:

  • Keep component-specific translations within components
  • Store global translations in separate JSON files

Why Vue Developers Choose This Approach ​

  1. Component Cohesion: Keeps translations with the components that use them
  2. Zero Extraction: No need to extract strings to separate files
  3. Context-Aware: AI understands component context for better translations
  4. Incremental Updates: Only translates what's changed, saving time and resources
  5. Standard Compatibility: Works with Vue I18n's recommended patterns

By integrating Lingo.dev into your Vue development workflow, you get powerful AI-driven translations while maintaining the component-based architecture that makes Vue so productive.