[![npm version](https://img.shields.io/npm/v/nuxt-google-translate?style=flat-square&color=cyan)](https://www.npmjs.com/package/nuxt-google-translate)
[![npm downloads](https://img.shields.io/npm/dt/nuxt-google-translate?style=flat-square&color=cyan)](https://www.npmjs.com/package/nuxt-google-translate)
[![GitHub stars](https://img.shields.io/github/stars/nexoscreation/nuxt-google-translate.svg?style=flat-square&color=cyan)](https://github.com/nexoscreation/nuxt-google-translate)
[![GitHub code](https://img.shields.io/github/languages/code-size/nexoscreation/nuxt-google-translate.svg?style=flat-square&color=cyan)](https://github.com/nexoscreation/nuxt-google-translate)
[![GitHub license](https://img.shields.io/github/license/nexoscreation/nuxt-google-translate.svg?style=flat-square&color=cyan)](https://github.com/nexoscreation/nuxt-google-translate)

---

# 🚀 Nuxt Google Translate

![Project Banner](https://github.com/user-attachments/assets/fd43e328-daa8-47e5-833a-075bdab3a757)

> 🌍 Easily integrate Google Translate into your Nuxt 3 application with this powerful and customizable module.

---

## 🌟 Features

- 🌐 Seamless integration with Google Translate
- 🚀 Easy to set up and use
- 🎨 Customizable styling
- 🤩 Support 100+ Languages
- 🔧 Configurable default language and supported languages

---

## 🚀 Quick Start

Follow these steps to set up **Nuxt Google Translate** in your Nuxt project. 

### 🔧 **Prerequisites**

- Ensure you have **Node.js** and **npm** installed.  
- A Nuxt 3 project ready to go.  

### ⚡ **Installation Steps**

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

3. **Use the Component**  
   Add the `<GoogleTranslate />` component to your app layout or `app.vue`:  
   ```vue
   <template>
     <ClientOnly>
       <GoogleTranslate />       
     </ClientOnly>
   </template>
   ```  

That's it! Your Nuxt app now supports multiple languages with Google Translate. 🎉 

### 🎯 Usage

You can also use the `<LanguageSelector />` component for a dropdown menu to switch languages:  

```vue
<template>
  <div>
    <LanguageSelector />
  </div>
</template>
```

For more advanced configurations, check out the [📘 Full Documentation](https://nexoscreation.tech/docs/resources/google-translate). 🚀  

---

## 🔗 Useful Links

[![Website Demo](https://img.shields.io/badge/Web-Demo-blue?style=for-the-badge&logo=google-chrome)](https://nexoscreation.github.io/nuxt-google-translate/)
[![GitHub Repo](https://img.shields.io/badge/GitHub-Repo-green?style=for-the-badge&logo=github)](https://github.com/nexoscreation/nuxt-google-translate)
[![YouTube Video](https://img.shields.io/badge/YouTube-Video-red?style=for-the-badge&logo=youtube)](https://www.youtube.com/watch?v=vapgAOjdSMQ)
[![Documentation](https://img.shields.io/badge/Documentation-Read%20Now-blue?style=for-the-badge&logo=readthedocs)](https://nexoscreation.tech/docs/resources/google-translate)

---

## 🤝 Contributing

We ❤️ contributions! Follow these steps to contribute:

1. 🍴 **Fork** the repository
2. 🌿 **Create** a new branch (`git checkout -b feature/AmazingFeature`)
3. 💾 **Commit** your changes (`git commit -m 'Add some AmazingFeature'`)
4. 🚀 **Push** to the branch (`git push origin feature/AmazingFeature`)
5. 🔃 **Open a Pull Request**

📖 _See our [Contribution Guidelines](CONTRIBUTING.md) for more details._

---

## 📄 License

This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for details.

---

## 🙏 Acknowledgements

- [Google Translate](https://translate.google.com/) - For enabling seamless language translation.
- [Nuxt](https://nuxt.com/) - For providing a powerful framework for building web applications.
- The open-source community - For the amazing tools and contributions that make this module possible.

---

## 📬 **Contact & Community**

💬 Join us on **Discord**: [Click Here](https://discord.gg/H7pVc9aUK2)  
🐦 **Follow on Twitter**: [@nexoscreation](https://twitter.com/nexoscreation)  
📧 **Email**: [contact@nexoscreation.tech](mailto:contact@nexoscreation.tech)

<p align="center">
  Made with ❤️ by the Nexos Creation Team
</p>

<p align="center">
  <a href="https://github.com/nexoscreation/nuxt-google-translate/stargazers">⭐ Star us on GitHub!</a>
</p>