Maxime Lucas

Repositories

13

Projects Packages

4

Public activity Starred repositories

@mlcs/nuxt-tolgee (1.5.0)

Published 2024-05-18 12:06:12 +02:00 by freesker in mlcsthor/nuxt-tolgee

Installation

Setup this registry in your project .npmrc file:

@mlcs:registry=

To install the package using npm, run the following command:

npm install @mlcs/nuxt-tolgee@1.5.0

or add it to the package.json file:

"@mlcs/nuxt-tolgee": "1.5.0"

For more information on the npm registry, see the documentation.

About this package

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>
  <p>Current language: {{ language }}</p></template
>

<script setup lang="ts">
  const { t, language } = useTranslate()
  const { t: t2 } = useTranslate('test')

  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

Dependencies

Dependencies

ID	Version
@nuxt/eslint	^0.3.12
@nuxt/kit	^3.11.2
@tolgee/format-icu	^5.26.0
@tolgee/vue	^5.26.0
defu	^6.1.4
unzipit	^1.4.3

Development dependencies

ID	Version
@nuxt/eslint-config	^0.3.12
@nuxt/module-builder	^0.6.0
@nuxt/schema	^3.11.2
@nuxt/test-utils	^3.9.01
@types/node	^20.12.12
@typescript-eslint/eslint-plugin	^7.9.0
@typescript-eslint/parser	^7.9.0
eslint	^9.2.0
eslint-plugin-simple-import-sort	^12.1.0
husky	^9.0.11
lint-staged	^15.2.2
nuxt	^3.11.2
vitest	^1.6.0

Details

npm

mlcsthor/nuxt-tolgee

2024-05-18 12:06:12 +02:00

14

MIT

4.4 KiB

Assets (1)

nuxt-tolgee-1.5.0.tgz 4.4 KiB

Versions (5) View all

1.6.2 2024-11-17

1.6.1 2024-10-22

1.5.0 2024-05-18

1.4.2 2024-01-11

1.4.1 2024-01-11

Issues