Nuxt Google Translate Module

A simple Nuxt module that integrates the Google Translate widget into your Nuxt.js application, allowing seamless multilingual support without requiring an API key.

Published: January 26, 2025

Effortlessly integrate Google Translate into your Nuxt 3 application with this powerful, customizable module. Take your app global with just a few steps! 🌍✨

🛠 Quick Setup

Install the Module Add the dependency to your project:
```
npm install nuxt-google-translate
```

Configure the Module Add nuxt-google-translate to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['nuxt-google-translate'],
  googleTranslate: {
    defaultLanguage: 'en', // Set the default language
    supportedLanguages: ['en', 'fr', 'es', 'de', 'ja'], // Supported languages
  },
});

Add the Component Use the <GoogleTranslate /> component in your app.vue or specific layout:

<template>
  <ClientOnly>
    <GoogleTranslate />       
  </ClientOnly>
  </div>
</template>

That’s it! Your app now supports multiple languages using Google Translate. 🎉

🔧 Configuration Options

Configure the module to meet your app’s needs:

Example `nuxt.config.ts`

export default defineNuxtConfig({
  modules: ['nuxt-google-translate'],
  googleTranslate: {
    defaultLanguage: 'en', // Default language of the app
    supportedLanguages: ['en', 'fr', 'es', 'de', 'ja'], // List of supported languages
  },
});

Supported Languages

The module supports over 100+ languages. Add them to the supportedLanguages array using their ISO-639 codes (e.g., en for English, hi for Hindi, fr for French).

| Supported Languages | Code | |----------------------|----------------| | Abkhazian | ab | | Acehnese | ace | | Acholi | ach | | Afrikaans | af | | Albanian | sq | | Alur | alz | | Amharic | am | | Arabic | ar | | Armenian | hy | | Assamese | as | | Awadhi | awa | | Aymara | ay | | Azerbaijani | az | | Balinese | ban | | Bambara | bm | | Bashkir | ba | | Basque | eu | | Barak Karo | btx | | Batak Simalungun | bts | | Batak Toba | bbc | | Belarusian | be | | Bemba | bem | | Bengali | bn | | Betawi | bew | | Bhojpuri | bho | | Bikol | bik | | Bosnian | bs | | Breton | br | | Bulgarian | bg | | Buryat | bua | | Cantonese | yue | | Catalan | ca | | Cebuano | ceb | | Chichewa (Nyanja) | ny | | Chinese (Simplified) | zh-CN or zh | | Chinese (Traditional)| zh-TW | | Chuvash | cv | | Corsican | co | | Crimean Tatar | crh | | Croatian | hr | | Czech | cs | | Danish | da | | Dinka | din | | Divehi | dv | | Dogri | doi | | Dombe | dov | | Dutch | nl | | Dzongkha | dz | | English | en | | Esperanto | eo | | Estonian | et | | Ewe | ee | | Fijian | fj | | Filipino (Tagalog) | fil or tl | | Finnish | fi | | French | fr | | French (French) | fr-FR | | French (Canadian) | fr-CA | | Frisian | fy | | Fulfulde | ff | | Ga | gaa | | Galician | gl | | Ganda (Luganda) | lg | | Georgian | ka | | German | de | | Greek | el | | Guarani | gn | | Gujarati | gu | | Haitian Creole | ht | | Hakha Chin | cnh | | Hausa | ha | | Hawaiian | haw | | Hebrew | iw or he | | Hiligaynon | hil | | Hindi | hi | | Hmong | hmn | | Hungarian | hu | | Icelandic | is | | Igbo | ig | | Iloko | ilo | | Indonesian | id | | Irish | ga | | Italian | it | | Japanese | ja | | Javanese | jw or jv | | Kannada | kn | | Kapampangan | pam | | Kazakh | kk | | Khmer | km | | Kinyarwanda | rw | | Korean | ko | | Kurdish (Kurmanji) | ku | | Kurdish (Sorani) | ckb | | Latvian | lv | | Lithuanian | lt | | Macedonian | mk | | Malay | ms | | Malayalam | ml | | Maltese | mt | | Marathi | mr | | Mongolian | mn | | Nepali | ne | | Norwegian | no | | Persian | fa | | Polish | pl | | Portuguese | pt | | Punjabi | pa | | Romanian | ro | | Russian | ru | | Serbian | sr | | Spanish | es | | Swahili | sw | | Swedish | sv | | Tamil | ta | | Telugu | te | | Turkish | tr | | Ukrainian | uk | | Urdu | ur | | Vietnamese | vi | | Welsh | cy | | Yoruba | yo | | Zulu | zu | |----------------------|----------------|

This list of supported languages can be used as part of the supportedLanguages array in your nuxt.config.js file for enabling Google Translate support across your application.

🌟 Usage Examples

1. Basic Language Selector

Use the <LanguageSelector /> component to add a dropdown menu for switching languages:

<template>
  <div>
    <LanguageSelector />
  </div>
</template>

2. Programmatic Language Management

Use the useGoogleTranslate composable to dynamically manage translations:

<script setup>
import { useGoogleTranslate } from '#imports';

const { activeLanguage, setLanguage, supportedLanguages, isLoaded } = useGoogleTranslate();

// Update language programmatically
const changeLanguage = (lang) => {
  setLanguage(lang);
};
</script>

<template>
  <div>
    <p>Current Language: {{ activeLanguage }}</p>
    <select v-if="isLoaded" @change="changeLanguage($event.target.value)">
      <option v-for="lang in supportedLanguages" :key="lang" :value="lang">
        {{ lang }}
      </option>
    </select>
    <p v-if="!isLoaded">Loading translations...</p>
  </div>
</template>

3. Custom Styling

Customize the styling of the dropdown and translate components to match your app’s theme.

For example, add Tailwind or your preferred CSS framework to style the <LanguageSelector />.

💡 Pro Tips

Disable Auto-Translate: Add the notranslate class to specific elements to prevent them from being automatically translated. For example:
```
<div class="notranslate">
  This text will not be translated.
</div>
```
Responsive Design: The module is mobile-friendly, but you can enhance responsiveness further by applying custom media queries or CSS utilities.
Trailing Loading Icon: Use the loading-trailing prop in <LanguageSelector /> or <USelectMenu /> to display a spinner at the end of the dropdown while loading.

🛠 Troubleshooting

If you encounter any issues, try these steps:

Ensure you’re using the latest version of the module.
Verify the module is added to the modules section of nuxt.config.ts.
Make sure <GoogleTranslate /> or <LanguageSelector /> is properly added to your app.vue or layout.
Check the browser console for error messages.

Still stuck? Open an issue on GitHub and include:

Your Nuxt version and Module version
Relevant code snippets
Detailed problem description

NEXOS LABS