npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-deepl-module

v1.0.7

Published

Automatically translate single-language Nuxt.js websites into multiple languages using the DeepL API (unofficial)

Downloads

103

Readme

Nuxt Deepl Module Cover

Nuxt DeepL Module

npm version npm downloads License Nuxt

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

  1. Install the module using npm or yarn:

    npm install nuxt-deepl-module
    yarn install nuxt-deepl-module
  2. 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.

Preview of DeeplLanguageSelect component

<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:

Default Style CSS

  • 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