# Vue.js Website Translation and Localization | Vitra.ai

> Localize Vue.js interface content while preserving components, routes, application structure, and the existing release workflow.

**Canonical URL**: https://www.vitra.ai/integration/vuejs
**Source**: This is the Markdown rendering of https://www.vitra.ai/integration/vuejs, generated at build time from that page.

---

[←All integrations](https://www.vitra.ai/integrations)

Vue.js Translation

Browse ▾

[←All integrations](https://www.vitra.ai/integrations)

![](https://www.vitra.ai/icons/integrations/vue.svg)

# VUE JS

Vue.js is a progressive JavaScript framework for building user interfaces. It focuses on simplicity, reactivity, and easy integration.

[Connect](https://universe.vitra.ai)

Unlike heavier frameworks, Vue focuses primarily on the view layer, making it simple to adopt for both small components and large-scale applications.

![VUE JS](https://www.vitra.ai/static/images/integration/vuejs/overview.png)

## Vue.js Integration (Pre-installed in Universe Website Translation)

### Step 1: Select Vue.js as Project Technology

- While creating your project in Universe Website Translation, choose Vue.js as the technology.
- (Vue is already available in the system — no additional installation required.)

### Step 2: Copy the Vitra Snippet

- After project creation, copy the Vitra / Universe Website Translation snippet from your dashboard.

![Step 2: Copy the Vitra Snippet](https://www.vitra.ai/static/images/integration/vuejs/step-2.png)

### Step 3: Open Your Vue Project Entry File

- Since Vue is already set, you only need to add the snippet globally so it loads on every route.
- Search src/app.html

### Step 4: Paste Snippet in the Global

- Open the file, find , and paste the snippet just above it.
- Add a simple label like:
-

### Step 5: Save & Deploy

- Save the file, rebuild your project, and deploy.
- That's it - Universe Website Translation will now load across your Vue app (including SPA route changes) without any extra Vue configuration.

## Where to go next

Vue.js Website Translation and Localization is one way into Vitra.ai. Website translation is the capability doing the work behind it.

[CapabilityWebsite translation](https://www.vitra.ai/features/website-translation)[Read nextTranslate a Vue App With Vue I18n](https://www.vitra.ai/general/translate-a-vue-app)[Read nextContinuous localization for always-on content](https://www.vitra.ai/general/continuous-localization)

Browse every connector on the [integrations directory](https://www.vitra.ai/integrations).

---

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Vue.js Website Translation and Localization integration",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "url": "https://www.vitra.ai/integration/vuejs",
  "description": "Localize Vue.js interface content while preserving components, routes, application structure, and the existing release workflow.",
  "featureList": [
    "Unlike heavier frameworks, Vue focuses primarily on the view layer, making it simple to adopt for both small components and large-scale applications."
  ],
  "isPartOf": {
    "@type": "SoftwareApplication",
    "name": "Vitra Universe",
    "url": "https://www.vitra.ai"
  },
  "publisher": {
    "@id": "https://www.vitra.ai/#organization"
  }
}
```

```json
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.vitra.ai"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Integrations",
      "item": "https://www.vitra.ai/integrations"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Vue.js Website Translation and Localization integration",
      "item": "https://www.vitra.ai/integration/vuejs"
    }
  ]
}
```