Vue JS

Vue.js is a progressive JavaScript framework for building user interfaces, loved for its gentle learning curve and flexible, component-driven architecture.

Install Translate.website on Vue.js

Building your app with Vue.js? You don't need to install any Vue plugin or register any library to make your Vue app multilingual.

By adding the Translate.website script tag to your index.html, you get instant automatic translation across your entire Vue SPA — whether you're using Vue 2, Vue 3, Vue CLI, or Vite.

Once set up, Translate.website will automatically detect each visitor's browser language and display your content in their preferred language — no Vuex or Pinia store changes required.

This guide walks you through the entire setup from start to finish.

Add Translate.website to Your Vue.js App

Adding Translate.website to a Vue app takes less than 2 minutes. No plugin registration, no store changes — just paste one script tag and you're live.

Before You Begin

An active Translate.website account.
A Vue.js project (Vue 2 or Vue 3, Vue CLI or Vite).
Access to your project's index.html or public/index.html file.

Step 1: Get Your Translate.website Snippet

Before you add the script to your Vue app, you need to retrieve your unique Translate.website snippet from the dashboard. This snippet is specific to your account and website domain.

Log in to your Translate.website account at app.translate.website
From the dashboard, navigate to Settings → Snippet.
Copy the full script tag — it looks like: <script src='...' data-site-id='...'></script>
Keep this snippet ready — you'll paste it into your Vue project in the next step.

Translate.website dashboard showing the snippet settings page

Step 2: Add the Script to index.html

In Vue.js projects created with Vue CLI or Vite, the public/index.html or index.html file is the HTML entry point for your application. This is where you'll add the Translate.website script.

Open your Vue project in your code editor.
For Vue CLI: Open public/index.html.
For Vite (Vue 3): Open index.html at the project root.
Find the </head> closing tag.
Paste your Translate.website snippet just before </head>.
Save the file.

Vue.js index.html file with Translate.website script tag added before closing head tag

Step 3: Verify the Integration

Restart your Vue development server and confirm the script loads correctly.

Run: npm run dev or npm run serve
Open your app in the browser (usually http://localhost:5173 or :8080).
Open DevTools → Network — look for the Translate.website script.
The translation widget should appear on your site.

Browser showing Vue.js app with Translate.website translation widget visible

🚀 What Happens After Saving?

Once the script is in your index.html, it will load with every page of your Vue SPA. Translate.website detects visitor language and displays translations automatically — no Vuex or Pinia store changes required.

The script integrates non-intrusively with Vue's rendering cycle.

🔁 Safe & Reversible

This integration is completely reversible. To remove Translate.website from your Vue app, simply open your index.html, delete the script snippet you added, and save. No plugins were registered, no store was modified, and no permanent changes were made to your Vue project.

💡 Why This Method Is Recommended

Works with Vue 2 and Vue 3 — no version-specific configuration.
Compatible with Vue Router, Nuxt, and Vite setups.
No Vue plugin registration required — a single script tag is all you need.
Fully reversible — remove the script to uninstall instantly.

Ready to make your Vue.js app multilingual?

One script tag is all it takes. No Vue-specific setup — just paste and go.