Nuxt Tolgee

⚠ To use this module, SSR must be disabled (ssr: false in nuxt.config.ts)

Quick Setup

1. Log to NPM registry

npm config set @mlcs:registry https://git.deditoolbox.fr/api/packages/mlcsthor/npm/

npm config set -- '//git.deditoolbox.fr/api/packages/mlcsthor/npm/:_authToken' "[personal_access_token]"

2. Add @mlcs/nuxt-tolgee dependency to your project

yarn add @mlcs/nuxt-tolgee

3. Add @mlcs/nuxt-tolgee to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@mlcs/nuxt-tolgee"],
});

4. Configure module inside nuxt.config.ts

export default defineNuxtConfig({
  tolgee: {
    // options
  },
});

5. Wrap content in app.vue with Provider

<template>
  <TolgeeProvider>
    <template #fallback>
      <div>Loading...</div>
    </template>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </TolgeeProvider>
</template>

<script setup lang="ts">
const { TolgeeProvider } = useTranslate()
</script>

That's it! You can now use @mlcs/nuxt-tolgee in your Nuxt app ✨

Configuration

Name	Type	Default	Description
url	string	/	Your Tolgee instance url
key	string	/	Your Tolgee apiKey
defaultLanguage	string	en	Default language
languages	string[]	[]	List of all available languages
hook	boolean	true	Auto-retrieve translations from your instance on build
defaultNamespace	boolean	''	Default namespace used by useTranslate
namespaces	boolean	[]	Namespaces to download from platform

Usage

<template>
  <p>{{ t('hello') }}</p>
  <!-- OR -->
  <p><T key-name="hello" /></p>

  <p>Current language: {{ language }}</p></template
>

<script setup lang="ts">
  const { t, language, T } = useTranslate()

  console.log(t("world"));
</script>

Development

# Install dependencies
yarn install

# Generate type stubs
yarn dev:prepare

# Develop with the playground
yarn dev

# Build the playground
yarn dev:build

# Run ESLint
yarn lint

# Run Vitest
yarn test
yarn test:watch

# Release new version
yarn release