Add multilingual support to any Vue.js app

Skip the vue-i18n setup. One script tag translates every component, route view, and dynamically loaded content — including reactive updates from Pinia or Vuex state.

Get started View all integrations

What gets translated

Component templates

Vue Router views and transitions

Pinia/Vuex state-rendered content

Async-loaded components

v-html injected content

Error messages and notifications

Setup guide

1
Create a Lingvit project
Sign up at app.lingvit.com and create a project. Select Vue.js as your platform and add your production domain.

Add the script to your HTML entry point

Paste the Lingvit script before </body> in your index.html (Vite/Vue CLI) or in your root HTML template:

<!-- index.html -->
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://cdn.lingvit.com/widget.bundle.js?v=1" async></script>
</body>

3
Select languages and go live
Pick target languages from the Lingvit dashboard. Vue Router navigation and reactive DOM updates are detected automatically — no changes to your component tree.

Need the full platform overview? Web Apps & SPAs use case guide →

Frequently asked questions

Does it work with Vue Router navigation?

Yes. Lingvit uses a MutationObserver that fires on every DOM change — including content swapped in by Vue Router's <router-view>. Each route change triggers a fresh translation pass.

Vue 2 or Vue 3?

Both. Lingvit translates the rendered HTML output, not Vue's virtual DOM, so it works identically on Vue 2 and Vue 3 regardless of the Options or Composition API style.

Will it conflict with vue-i18n if I already use it?

No conflict. If you already use vue-i18n for some strings, Lingvit will translate whatever vue-i18n renders to the DOM. You can migrate gradually or run both simultaneously.

Does it handle reactive content updated after load?

Yes. Content rendered from Pinia or Vuex store updates, API responses, or computed properties is observed and translated as soon as it appears in the DOM.

Setup guide

Create a Lingvit project

Add the script to your HTML entry point

Paste the Lingvit script before </body> in your index.html (Vite/Vue CLI) or in your root HTML template:

<!-- index.html -->
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://cdn.lingvit.com/widget.bundle.js?v=1" async></script>
</body>

Select languages and go live

Pick target languages from the Lingvit dashboard. Vue Router navigation and reactive DOM updates are detected automatically — no changes to your component tree.

Frequently asked questions

Does it work with Vue Router navigation?

Yes. Lingvit uses a MutationObserver that fires on every DOM change — including content swapped in by Vue Router's <router-view>. Each route change triggers a fresh translation pass.

Vue 2 or Vue 3?

Both. Lingvit translates the rendered HTML output, not Vue's virtual DOM, so it works identically on Vue 2 and Vue 3 regardless of the Options or Composition API style.

Will it conflict with vue-i18n if I already use it?

No conflict. If you already use vue-i18n for some strings, Lingvit will translate whatever vue-i18n renders to the DOM. You can migrate gradually or run both simultaneously.

Does it handle reactive content updated after load?

Yes. Content rendered from Pinia or Vuex store updates, API responses, or computed properties is observed and translated as soon as it appears in the DOM.

Add multilingual support to any Vue.js app

What gets translated

Setup guide

Frequently asked questions

Start translating your Vue.js site

Add multilingual support to any Vue.js app

What gets translated

Setup guide

Frequently asked questions

Start translating your Vue.js site