Vue Translation

Lingo.dev supports translating single file components used by Vue I18n.

Setting Up

First, make sure you've got a i18n.json config file in your project root. Here's an example:

i18n.json

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

This config tells Lingo.dev:

1. Your source language is English;
2. You want to translate to Spanish, French, and German;
3. Your Vue components are in the src folder with .vue extension

Available Languages

Lingo.dev supports a wide range of languages. To see what's available:

npx lingo.dev@latest show locale sources  # List available source languages
npx lingo.dev@latest show locale targets  # List available target languages

Use these to pick the right locale codes for your project.

Translating

With your config set, run:

npx lingo.dev@latest i18n

Lingo.dev will:

1. Read your Vue components;
2. Identify new or changed strings;
3. Translate them to your target languages;
4. Update the translations in your components inside <i18n> tags.

Why This Works

Lingo.dev's approach is effective because:

1. It works directly with your Vue components, no need for separate translation files;
2. It uses AI to understand context, giving you more accurate translations than traditional word-for-word methods;
3. It's incremental, only translating what's new or changed, saving time and processing power.

Pro Tips

1. Component Structure: Lingo.dev handles Vue single-file components seamlessly:

   HelloWorld.vue

   <template>
     <div>
       <h1>{{ $t("welcome") }}</h1>
       <p>{{ $t("description") }}</p>
     </div>
   </template>
   
   <i18n>
   {
     "en": {
       "welcome": "Welcome",
       "description": "This is a Vue component"
     }
   }
   </i18n>

2. File Exclusions: You can exclude specific components from translation:

   i18n.json

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

3. Multiple File Types: You can configure multiple file types in your i18n.json:

   i18n.json

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

   This configuration allows Lingo.dev to handle both Vue components and separate JSON locale files in your project.

By leveraging these features, you can maintain a robust, scalable i18n setup for your Vue project. Lingo.dev's flexibility in handling Vue single-file components makes it a powerful tool for managing translations in Vue applications.