Vue Google Translate WidgetYour Vue site, in 100+ languages

An accessible language switcher that translates the page in place. Google's free widget by default, or DeepL, Google Cloud, Azure and LibreTranslate behind your own server.

Quick Start

How it works

GitHub

No page reloads

Languages switch in place, and restoring the original is instant. The choice is remembered across pages.

Accessible

A real dialog and listbox with full keyboard support, focus management and screen-reader announcements, checked with axe-core.

Not locked to Google

Swap Google's free widget for DeepL, Google Cloud, Azure or LibreTranslate, with API keys kept on your server.

Nuxt-ready

A module with auto-imports and server rendering of the visitor's language, so hydration matches.

Yours to style

Light, dark and auto themes, CSS custom properties, slots, or fully unstyled.

Right-to-left aware

Sets dir="rtl" for Arabic, Hebrew, Persian and Urdu, and puts it back afterwards.

Try it

Install

bash

npm install @ken_de_nigerian/vue-google-translate-widget

vue

<script setup>
import { GoogleTranslateWidget } from '@ken_de_nigerian/vue-google-translate-widget'
import '@ken_de_nigerian/vue-google-translate-widget/style.css'
</script>

<template>
  <GoogleTranslateWidget />
</template>

Then read the Quick Start.