Nuxt Google Translate Module

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

1. Install the Module Add the dependency to your project:

   npm install nuxt-google-translate
   

2. 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
     },
   });
   

3. 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).

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:

1. Ensure you’re using the latest version of the module.
2. Verify the module is added to the modules section of nuxt.config.ts.
3. Make sure <GoogleTranslate /> or <LanguageSelector /> is properly added to your app.vue or layout.
4. 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

📚 Resources

• Module Repository
• Nuxt Documentation
• Google Translate