docs/vue-integration-guide.md
Rama main · réplica de lectura del repositorio original.
---
title: "Vue.js"
subtitle: "AI translation for Vue.js with Lingo.dev CLI"
---
## What is Vue.js?
[Vue.js](https://vuejs.org/) is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and can easily scale between a library and a full-featured framework.
## What is Lingo.dev CLI?
Lingo.dev is an AI-powered translation platform. The Lingo.dev CLI reads source files, sends translatable content to large language models, and writes translated files back to your project.
## About this guide
This guide explains how to set up Lingo.dev CLI in a Vue.js application. You'll learn how to scaffold a project with Vue.js, configure a translation pipeline using vue-i18n, and implement language switching in your application.
## Step 1. Set up a Vue.js project
1. Install Vue CLI globally:
```bash
npm install -g @vue/cli
```
2. Create a new Vue.js project:
```bash
vue create i18n-example
```
When prompted for a preset, choose **"Manually select features"** and select:
- Babel
- Router
- Linter / Formatter
Then configure:
- **Vue version:** 3.x
- **Router history mode:** Yes
- **Linter:** ESLint with error prevention only (or your preference)
3. Navigate into the project directory:
```bash
cd i18n-example
```
4. Install vue-i18n for internationalization:
```bash
npm install vue-i18n@9
```
## Step 2. Create source content
1. Create a directory for storing localizable content:
```bash
mkdir -p src/locales
```
2. Create a file that contains some localizable content (e.g., `src/locales/en.json`):
```json
{
"welcome": "Welcome to Your Vue.js App",
"description": "This text is translated by Lingo.dev",
"greeting": "Hello, {name}!",
"toggle": "Switch Language",
"counter": "You clicked {count} times"
}
```
## Step 3. Configure the CLI
In the root of the project, create an `i18n.json` file:
```json
{
"$schema": "https://lingo.dev/schema/i18n.json",
"version": "1.10",
"locale": {
"source": "en",
"targets": ["es", "fr", "de", "ja"]
},
"buckets": {
"json": {
"include": ["src/locales/[locale].json"]
}
}
}
```
This file defines:
- the files that Lingo.dev CLI should translate
- the languages to translate between
In this case, the configuration translates JSON files from English to Spanish, French, German, and Japanese.
It's important to note that:
- `[locale]` is a placeholder that's replaced at runtime. It ensures that content is read from one location (e.g., `src/locales/en.json`) and written to a different location (e.g., `src/locales/es.json`).
- Lingo.dev CLI supports various file formats including JSON, MDX, and more.
To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config).
## Step 4. Translate the content
1. [Sign up for a Lingo.dev account](/app).
2. Log in to Lingo.dev via the CLI:
```bash
npx lingo.dev@latest login
```
3. Run the translation pipeline:
```bash
npx lingo.dev@latest run
```
The CLI will create translation files (e.g., `src/locales/es.json`, `src/locales/fr.json`, etc.) for storing the translated content and an `i18n.lock` file for keeping track of what has been translated (to prevent unnecessary retranslations).
## Step 5. Set up vue-i18n in your application
1. Create an i18n configuration file (`src/i18n.js`):
```javascript
import { createI18n } from "vue-i18n";
// It only imports 5 specific locales
import en from "./locales/en.json";
import es from "./locales/es.json";
import fr from "./locales/fr.json";
import de from "./locales/de.json";
import ja from "./locales/ja.json";
const messages = {
en,
es,
fr,
de,
ja,
};
// Create i18n instance
export default createI18n({
legacy: false, //you must set this to `false` to use Composition API
locale: "en", // set locale
fallbackLocale: "en", // set fallback locale
messages, // set locale messages
});
```
2. Update your main.js file to use i18n:
```javascript
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
createApp(App).use(router).use(i18n).mount("#app");
```
## Step 6. Implement language switching in your Vue components
1. Create a language switcher component (`src/components/LanguageSwitcher.vue`):
```vue
<template>
<div class="language-switcher">
<label for="language-select">Language:</label>
<select
id="language-select"
v-model="currentLocale"
@change="changeLocale"
>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="ja">日本語</option>
</select>
</div>
</template>
<script>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
export default {
name: "LanguageSwitcher",
setup() {
const { locale } = useI18n();
const currentLocale = ref(locale.value);
const changeLocale = () => {
locale.value = currentLocale.value;
};
watch(locale, (newLocale) => {
currentLocale.value = newLocale;
});
return {
currentLocale,
changeLocale,
};
},
};
</script>
<style scoped>
.language-switcher {
margin: 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
select {
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
</style>
```
2. Update your `App.vue` to use translations:
```vue
<template>
<div id="app">
<header>
<h1>{{ $t("welcome") }}</h1>
<p>{{ $t("description") }}</p>
<p>{{ $t("greeting", { name: "Vue.js" }) }}</p>
<LanguageSwitcher />
<Counter />
</header>
<router-view />
</div>
</template>
<script>
import LanguageSwitcher from "./components/LanguageSwitcher.vue";
import Counter from "./components/Counter.vue";
export default {
name: "App",
components: {
LanguageSwitcher,
Counter,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
```
3. Create a Counter component to demonstrate dynamic content (`src/components/Counter.vue`):
```vue
<template>
<div class="counter">
<p>{{ $t("counter", { count }) }}</p>
<button @click="increment">+</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Counter",
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment,
};
},
};
</script>
<style scoped>
.counter {
margin: 1rem 0;
}
button {
padding: 0.5rem 1rem;
margin-left: 0.5rem;
border: none;
border-radius: 4px;
background-color: #42b983;
color: white;
cursor: pointer;
}
</style>
```
## Step 7. Test the application
1. Start the development server:
```bash
npm run serve
```
2. Navigate to the following URL:
- http://localhost:8080
3. Verify that the language switching works:
- The application should display content in English by default
- Selecting a different language from the dropdown should update all translated text
- The counter should continue to function in all languages