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

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 layout or specific pages:<template> <div> <GoogleTranslate /> </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
  },
});

The module supports over 100 languages. Add them to the supportedLanguages array using their ISO-639 codes (e.g., en for English, fr for French).
Here’s a complete list of supported languages.

🌟 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 @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 /> or <GoogleTranslate />.

💡 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.

🙌 Contributing

We welcome contributions! Follow these steps to contribute:

Fork the repository: GitHub Repo

Create a new branch:

git checkout -b feature/my-awesome-feature

Make changes and commit: git commit -m "Add my awesome feature"

Push to the branch:

git push origin feature/my-awesome-feature

Submit a pull request and describe your changes.

🛠 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 layout or pages.
Check the browser console for error messages.

Still stuck? Open an issue on GitHub and include:

Your Nuxt version
Relevant code snippets
Detailed problem description

NEXOS CREATION