How to Localize Your Vue Application with Tolgee?
Tags: tutorial, opensource, beginners, translation
Published: 2023-06-29 12:34:45

<!-- wp:paragraph -->
<p>Nowadays, providing solutions to specific problems identified in a domain has fueled the creation and growth of many companies and startups. But one problem arises which is how to market the product in various places given that not everyone does not have the same background. Even though English is one of the most used languages, especially in the professional domain, this does not exclude the other part of the population that uses other languages. To build an application or solution for a specific area, you need to assure that your solution will <strong>efficiently communicate with the target audience</strong>. <a target="_blank" href="https://tolgee.io/blog/benefits-challenges-software-localization" rel="noreferrer noopener">Software localization</a> is the process of adapting a product or a service offered by the software to meet the needs of a desired culture, population or language.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article, you will learn how to <strong>localize your Vue application in various languages</strong> with Tolgee an open-source tool. But before that let’s have an overview of what Tolgee and Vuejs are.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="heading-what-is-tolgee"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-what-is-tolgee"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="heading-what-is-tolgee">What is Tolgee?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Tolgee is an <strong>open-source platform</strong> that provides a user-friendly interface for organizing translations for developers and translators. It facilitates the translation process by providing a centralized site for all translation duties, such as managing translation files, translating text, and integrating with popular development tools <strong>such as Nextjs, Gatsby or Angular.</strong> Tolgee also provides a number of tools to aid <a target="_blank" href="https://tolgee.io/features/collaboration" rel="noreferrer noopener">collaborative translation operations</a>, including translation memory. Tolgee is an <strong>all-in-one solution</strong> for project management and optimizing multilingual content distribution.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="heading-what-is-vuejs"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-what-is-vuejs"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="heading-what-is-vuejs">What is Vue.js?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a target="_blank" href="https://vuejs.org" rel="noreferrer noopener">Vue.js</a> is a JavaScript framework used for creating user interfaces, PWA and single-page apps. It is intended to be adopted in stages and can also serve as a web application framework capable of powering complex single-page applications. Vue.js is well-known for its ease of use and simplicity, making it a popular choice among developers for creating scalable and performant web apps.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="heading-how-to-integrate-tolgee-into-a-vue-application"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-how-to-integrate-tolgee-into-a-vue-application"></a></h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 id="heading-how-to-integrate-tolgee-into-a-vue-application">How to Integrate Tolgee into a Vue Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This selection highlights a step-by-step approach to integrating Togee into a Vue application.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-1-install-tolgee"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-1-install-tolgee"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-1-install-tolgee">Step 1: Install Tolgee</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can either create a Tolgee project via the <a target="_blank" href="https://app.tolgee.io/login" rel="noreferrer noopener">Tolgee Cloud Platform</a> or self-host it. In this tutorial, we will use the hosted version of Tolgee. However, you can host the server on your own via Docker. If you don’t have Docker installed use this Docker <a target="_blank" href="https://docs.docker.com/desktop/" rel="noreferrer noopener">quick guide</a> to get started</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It is recommended to run it in a single container.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>docker run -v tolgee_data:/data/ -p 8085:8080 tolgee/tolgee
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Then follow <a target="_blank" href="https://tolgee.io/platform/self_hosting/running_with_docker" rel="noreferrer noopener">this guide</a> to configure your Tolgee project.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-2-create-a-project"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-2-create-a-project"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-2-create-a-project">Step 2: Create a Project</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once everything is set up, log into your account and create a new project. Give a name to your project and <strong>add the languages</strong> you wish your app to use. In this tutorial, the app will use three languages: English, French and Spanish</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*xr9RL729DkAd6Dfb.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-3-generate-api-key"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-3-generate-api-key"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-3-generate-api-key">Step 3: Generate API Key</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Still, in your Tolgee dashboard, navigate to <code>integrate</code>; the last element in the left menu and select Vue among the list of app integrations</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*DdnpqhKL4MkmfVv-.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Then in the select input, click on <code>Create new</code> to create a new API Key.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*LtvjIf230R4oWbao.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Name your API key and select the period of time you wish to use it and click on Save.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*loWX2fNR1L3um1es.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This will generate a first-time-only token that you need to save somewhere on your PC because you will use it later.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-4-add-tolgee-to-your-vue-application"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-4-add-tolgee-to-your-vue-application"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-4-add-tolgee-to-your-vue-application">Step 4: Add Tolgee to Your Vue application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Navigate to your desired directory and run the following command :</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm init vue@latest
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>You will be prompted to provide your project’s name and other information.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you already have a project setup, you can skip this step.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>Vue.js - The Progressive JavaScript Framework
√ Project name: ... vue-tolgee
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Once the command is executed, navigate to the project’s root directory and run <code>npm install</code>, then <code>npm run dev</code> to start the app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If your application does not automatically open, type <code>[</code><a target="_blank" href="https://gunkev.hashnode.dev/`[`http://localhost:5173`](http://localhost:5173)`" rel="noreferrer noopener"><code>localhost:5173</code>](</a><a href="http://localhost:5173" target="_blank" rel="noreferrer noopener">localhost:5173</a>)`` in your browser to visualise your freshly created application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If your project is a Vue 3 Typescript project create <code>shims-vue.d.ts</code> file and add the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent&lt;{}, {}, any&gt;;
  export default component;
}
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This will allow you to import vue components.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-5-install-tolgee-package"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-5-install-tolgee-package"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-5-install-tolgee-package">Step 5: Install Tolgee Package</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now use the command below to install Tolgee.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>cd vue-tolgee
npm install @tolgee/vue
</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-6-add-environment-variable"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-6-add-environment-variable"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-6-add-environment-variable">Step 6: Add Environment Variable:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create <code>env.development.local</code> file if you don’t have one at the root of your project and paste the following code</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>VUE_APP_TOLGEE_API_URL=&lt;host&gt;
VUE_APP_TOLGEE_API_KEY=&lt;Only new key can be revealed&gt;
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>VUE_APP_TOLGEE_API_URL</code> is where your Tolgee server is hosted</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>VUE_APP_TOLGEE_API_KEY</code> is your API key. If somehow you lost the API key you generated earlier, you can regenerate a new one.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click on your profile picture at the top right corner of the dashboard</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*3Xs9Q3NXevRUiEol.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Then <code>Select Project API Keys</code>. In the new window that opens, either you add a new API key or you generate a new one. Make sure to save the API key somewhere this time in case you failed to do it previously.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once your API key is ready, you can now add it to your env file.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-7-initialize-tolgee"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-7-initialize-tolgee"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-7-initialize-tolgee">Step 7: Initialize Tolgee</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Update your <code>main.ts</code> found at the root of your project with the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import './assets/main.css';
import { createApp } from 'vue';
import App from './App.vue';
import {
  BackendFetch,
  DevTools,
  Tolgee,
  FormatSimple,
  VueTolgee,
} from '@tolgee/vue';

const tolgee = Tolgee()
  .use(DevTools())
  .use(FormatSimple())
  .use(BackendFetch())
  .init({
    language: 'en',
    apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
    apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
  });
const app = createApp(App);
app.use(VueTolgee, { tolgee });
app.mount('#app');
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Then wrap your code in <code>src/app.vue</code> in <code>TolgeeProvider</code> tag like below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;template&gt;
  &lt;TolgeeProvider&gt;
    &lt;header&gt;
      &lt;img
        alt="Vue logo"
        class="logo"
        src="./assets/logo.svg"
        width="125"
        height="125"
      /&gt;
      &lt;div class="wrapper"&gt;
        &lt;HelloWorld msg="You did it!" /&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;main&gt;
      &lt;TheWelcome /&gt;
    &lt;/main&gt;
  &lt;/TolgeeProvider&gt;
&lt;/template&gt;
</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-8-add-translations"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-8-add-translations"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-8-add-translations">Step 8: Add Translations</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now head to your Tolgee server and add some translations. In this tutorial, you will be translating the default Vue 3 starting application so for each text, add a keyname, and add the default English text. Make sure to <a target="_blank" href="https://tolgee.io/blog/naming-translation-keys" rel="noreferrer noopener">conventionally name your translations</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*FItDSCk2-zF997h8.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Then click on the French and Spanish input to select a translation from the <a target="_blank" href="https://tolgee.io/blog/tolgee-ai-translator" rel="noreferrer noopener">machine-generated translations</a> that best describes the text. You can adjust if you feel that the text does not fit its context.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Repeat this process until all translations are added. In the end, you should see the list of translations below.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*c3Efn7wpzP69xDNk.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-9-create-a-select-component"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-9-create-a-select-component"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-9-create-a-select-component">Step 9: Create a Select Component</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The select component will help you easily switch from one language to another. In your <code>src/components</code> created <code>selector.vue</code> file and add the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;script setup&gt;
import { useTolgee } from '@tolgee/vue'
const tolgee = useTolgee(&#91;'language'])
const changeLanguage = (e) =&gt; {
  tolgee.value.changeLanguage(e.target.value)
}
&lt;/script&gt;
&lt;template&gt;
  &lt;select :value="tolgee.getLanguage()" v-on:change="changeLanguage" class="selector"&gt;
    &lt;option value="en"&gt;🇬🇧 English&lt;/option&gt;
    &lt;option value="fr"&gt;🇫🇷 Français&lt;/option&gt;
    &lt;option value="es"&gt;🇪🇸 Español&lt;/option&gt;
  &lt;/select&gt;
&lt;/template&gt;
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now let’s give some style to the select tag with the following code in <code>src/assets.main.css</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.selector {
  display: block;
  text-align: center;
  width: 80%;
  padding: 10px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  background: rgba(0, 255, 255, 0.51);
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  cursor: pointer;
  margin-left: 10px;
</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-10-add-translation-keynames"><a href="https://gunkev.hashnode.dev/how-to-localize-your-vue-application-with-tolgee#heading-step-10-add-translation-keynames"></a></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 id="heading-step-10-add-translation-keynames">Step 10: Add Translation Keynames</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is the last step which consists of adding translation keynames. A typical translation looks like this:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import { T } from '@tolgee/vue';

&lt;T keyName="documentation" defaultValue="Documentation" /&gt;;
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>So in your <code>src/components/TheWelcome.vue</code> replace your code with the following:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And <code>src/components/HelloWorld.vue</code> add:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;script setup lang="ts"&gt;
import { T } from '@tolgee/vue'
...
&lt;/script&gt;

&lt;template&gt;
  &lt;div class="greetings"&gt;
   ...
    &lt;h3&gt;
      &lt;T keyName="success" defaultValue="You've successfully created a project with Vite + Vue 3" /&gt;
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Finally, update your <code>App.vue</code> file with the code below:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the code block above, we have updated our components imports and added the <code>Selector</code> component we created earlier.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But there is one last thing we need to do, which is to add our translation files to the Vue project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In your Tolgee dashboard, click on export in the left menu, then select the languages you wish to use and click on export.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*Gh2Nh66jn-M2YRBj.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Create i18n folder in your Vue application public folder and add the extracted files</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://miro.medium.com/v2/resize:fit:700/0*qUu9223BpJ7mwSSy.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><code>utilis/i18n/en.json</code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{
  "documentation": "Documentation",
  "documentation_desc": "Vue’s official documentation provides you with all information you need to get started.",
  "tooling": "Tooling",
  "tooling_desc": "This project is served and bundled with Vite. The recommended IDE setup is VSCode + Volar. If you need to test your components and web pages, check out Cypress and Cypress Component Testing. More instructions are available in README.md.",
  "ecosystem": "Ecosystem",
  "ecosystem_desc": "Get official tools and libraries for your project: Pinia, Vue Router, Vue Test Utils, and Vue Dev Tools. If you need more resources, we suggest paying Awesome Vue a visit. ",
  "community": "Community",
  "community_desc": "Got stuck? Ask your question on Vue Land, our official Discord server, or StackOverflow. You should also subscribe to our mailing list and follow the official @vuejs twitter account for latest news in the Vue world. ",
  "support Vue": "Support Vue",
  "support Vue_desc": "As an independent project, Vue relies on community backing for its sustainability. You can help us by becoming a sponsor. "
    "readme": "More instructions are available in README.md.",
  "success": "You’ve successfully created a project with Vite + Vue 3",
  "hello": "Hello"
}
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>utilis/i18n/fr.json</code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{
  "documentation": "Documentación",
  "documentation_desc": "La documentation officielle de Vue vous fournit toutes les informations dont vous avez besoin pour commencer.",
  "tooling": "Outillage",
  "tooling_desc": "Ce projet est servi et groupé avec Vite. La configuration IDE recommandée est VSCode + Volar. Si vous avez besoin de tester vos composants et vos pages Web, consultez Cypress et Cypress Component Testing. Plus d'instructions sont disponibles dans README.md.",
  "ecosystem": "Écosystème",
  "ecosystem_desc": "Obtenez des outils et des bibliothèques officiels pour votre projet : Pinia, Vue Router, Vue Test Utils et Vue Dev Tools. Si vous avez besoin de plus de ressources, nous vous suggérons de rendre visite à Awesome Vue.",
  "community": "Communauté",
  "community_desc": "Est resté coincé? Posez votre question sur Vue Land, notre serveur Discord officiel, ou StackOverflow. Vous devez également vous inscrire à notre liste de diffusion et suivre le compte Twitter officiel @vuejs pour les dernières nouvelles du monde Vue.",
  "support Vue": "Soutenir Vue",
  "support Vue_desc": "En tant que projet indépendant, Vue s'appuie sur le soutien de la communauté pour sa durabilité. Vous pouvez nous aider en devenant parrain.",
  "readme": "Plus d'instructions sont disponibles dans README.md.",
  "success": "Vous avez réussi à créer un projet avec Vite + Vue 3",
  "hello": "Bonjour"
}
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><code>utilis/i18n/es.json</code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{
  "documentation": "Documentación",
  "documentation_desc": "La documentación oficial de Vue le brinda toda la información que necesita para comenzar.",
  "tooling": "Estampación",
  "tooling_desc": "Este proyecto se sirve y se incluye con Vite. La configuración IDE recomendada es VSCode + Volar. Si necesita probar sus componentes y páginas web, consulte Cypress y Cypress Component Testing. Más instrucciones están disponibles en README.md.",
  "ecosystem": "Ecosistema",
  "ecosystem_desc": "Obtenga herramientas y bibliotecas oficiales para su proyecto: Pinia, Vue Router, Vue Test Utils y Vue Dev Tools. Si necesita más recursos, le sugerimos que visite Awesome Vue. ",
  "community": "Comunidad",
  "community_desc": "¿Quedó atascado? Haga su pregunta en Vue Land, nuestro servidor oficial de Discord o StackOverflow. También debe suscribirse a nuestra lista de correo y seguir la cuenta oficial de Twitter @vuejs para conocer las últimas noticias en el mundo de Vue. ",
  "support Vue": "Soporte Vue",
  "support Vue_desc": "Como proyecto independiente, Vue depende del respaldo de la comunidad para su sostenibilidad. Puedes ayudarnos convirtiéndote en patrocinador. ",
  "readme": "Hay más instrucciones disponibles en README.md.",
  "success": "Ha creado con éxito un proyecto con Vite + Vue 3",
  "hello": "Hola"
}
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you re-run your application, it should be working perfectly like the screenshot below:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can find the full working code in this <a target="_blank" href="https://github.com/Gunkev/vue-tolgee/tree/main" rel="noreferrer noopener">GitHub Repository</a>.</p>
<!-- /wp:paragraph -->