@freesker/nuxt-tolgee v1.0.2

Nuxt Tolgee

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

Quick Setup

1. Add @freesker/nuxt-tolgee dependency to your project

pnpm add @freesker/nuxt-tolgee

2. Add @freesker/nuxt-tolgee to the modules section of nuxt.config.ts

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

3. Configure module inside nuxt.config.ts

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

4. Wrap content in app.vue with Provider

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

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

<script setup lang="ts">
import { TolgeeProvider } from '@tolgee/vue';
</script>

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

Configuration

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 } = useTolgee()

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

Development

# Flox is used here to create a virtual dev environment with everything installed automatically using nix
# see https://flox.dev/docs/install-flox/ to install it

# Enable virtual environment
flox activate

# Install dependencies (automatically done with `flox activate`)
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release

# Use tolgee-cli
pnpm run tolgee-cli