nuxt-deepl-module
v1.0.7
Published
Automatically translate single-language Nuxt.js websites into multiple languages using the DeepL API (unofficial)
Downloads
95
Maintainers
Readme
Nuxt DeepL Module
The unofficial Nuxt DeepL Module offers a solution for transforming single-language Nuxt.js websites into multi-language sites without the complexities of manual translation. By using the DeepL API, this module automates the translation process, ensuring a seamless user experience across various languages.
Features
- 🤖 Automated Translation: Translate website content into multiple languages using the DeepL API.
- ⚡️ Caching: Enhance performance by caching DeepL API responses
- 🗣️ Pre-Build Component: Pre-build user-friendly language selector component for easy language switching.
- 🍪 Cookie-Based Preferences: Remember user language preferences using cookie
- 🔒 Secure DeepL Requests: Maintain data privacy and security with a built-in proxy
Requirements
- Nuxt.js 3.x or later
- A DeepL API account (please note: The Free Plan has a maximum limit of 1,500 characters)
Installation and Setup
Install the module using npm or yarn:
npm install nuxt-deepl-module yarn install nuxt-deepl-module
Add the module to your
nuxt.config.js
file:export default { modules: ["nuxt-deepl-module"], deepl: { apiKey: null, // Pro or Free API Key apiType: "free", apiUrl: { pro: "https://api.deepl.com/v2", free: "https://api-free.deepl.com/v2", }, glossaryPairs: [], defaultLanguage: "de", // Default language of your content useCache: true, useCookie: true, debug: false, }, runtimeConfig: { deepl: { // This can be overridden at runtime via the NUXT_DEEPL_API_KEY // environment variable. apiKey: '' } } };
Usage
- DeeplLanguageSelect Component:
Use the pre-built
DeeplLanguageSelect
component for a language selection interface.
<template>
<!-- Default Component with all languages -->
<DeeplLanguageSelect />
<!-- Component with selected languages and slots -->
<DeeplLanguageSelect :selectedLanguages="['de', 'en', 'fr', 'it']">
<template #button="{currentLanguage, isTranslating, isOpen}">
...
</template>
<template #menu="{selectedLanguages, setLanguage}">
...
</template>
</DeeplLanguageSelect
</template>
You can override the default styles with the template:
- Directives : Use the Directive to exclude elements (and child elements) from translation and updates (e.g.: for reactive elements)
<template>
<div>
<!-- This text will not be translated -->
<div v-deepl:disable>
Hello I am an information text
</div>
<!--
This button will be translated. However,
reactive changes will not be taken into account.
-->
<button v-deepl:watch="false">
{{ isOpen ? 'Close menu' : 'Open menu' }}
</button>
</div>
</template>
- Composable:
Use the
useDeepl
composable to programmatically access the DeepL translation functionality within your Vue components.
<script setup>
import {onMounted} from 'vue';
const deepl = useDeepl();
const {
currentLanguage, // readonly
previousLanguage, // readonly
defaultLanguage, // readonly
cookieLanguage, // readonly
isTranslating, // readonly
setLanguage,
} = deepl;
/* Switch language to French */
onMounted(() => {
/* Works for client-side only */
setLanguage('fr')
});
</script>
- Global
$deepl
property:
<template>
<!-- Show the current active language -->
<div>
{{ $deepl.currentLanguage }}
</div>
</template>
Future Development
- SSR Support: Translate pages on server side
- Auto generated language routes:
Generate route prefixes like
/de/
or/fr/
based on defined languages
Buy me a coffee
Contribution
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release