5.26.0 • Published 1 day ago

@tolgee/vue v5.26.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 day ago

{% import "../../readmeMacros/macros.njk.md" as macros %} {{ macros.header('Tolgee for Vue', 'The Tolgee i18n SDK for Vue', packageName) }}

What is Tolgee for Vue?

Vue integration library of Tolgee. With this package, it's super simple to add i18n to your Vue app! For more information about using Tolgee with Vue, visit the docs 📖.

Localize (translate) your Vue projects to multiple languages with Tolgee. Integration of Tolgee is extremely simple! 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧

Currently we support vue v3 only

{{ macros.integrationLinks('Tolgee for Vue docs', macros.v5link('integrations/vue/installation')) }}

{{ macros.installation('vue') }}

Initialize tolgee

import { Tolgee, VuePlugin, VueTolgee, FormatSimple } from '@tolgee/vue';

const tolgee = Tolgee()
  .use(VuePlugin())
  .use(FormatSimple())
  .init({
    language: 'en',
    apiUrl: process.env.VUE_APP_TOLGEE_API_URL,
    apiKey: process.env.VUE_APP_TOLGEE_API_KEY,
  });

...

app.use(VueTolgee, { tolgee });

Then use the library in your app:

<template>
  <TolgeeProvider>
    <template v-slot:fallback>
      <div>Loading...</div>
    </template>
    <App />
  </TolgeeProvider>
</template>

T component

<template>
  <T keyName="translation_key" />
</template>

<script setup>
  import { T } from '@tolgee/vue';
</script>

or with the default value

<T keyName="translation_key" defaultValue="Default value" />

Composition API for imperative translations

<template>
  <div title="t('translation_key')">Hello</div>
</template>

<script setup>
  import { useTranslate } from '@tolgee/vue';

  const { t } = useTranslate();
</script>

or for language switching

<template>
  <select
    :value="tolgee.getLanguage()"
    v-on:change="changeLanguage"
  >
    <option value="en">en</option>
    <option value="de">de</option>
  </select>
</template>

<script setup>
  import { useTolgee } from '@tolgee/vue';

  const tolgee = useTolgee(['language']);

  const changeLanguage = (e) => {
    tolgee.value.changeLanguage(e.target.value);
  };
</script>

{{ macros.prereq('Vue') }}

{{ macros.why() }}

Development

{{ macros.developmentInstallation() }} {{ macros.development('vue') }}

{{ macros.developmentTesting('/packages/vue') }}

{{ macros.e2eTesting('vue') }}

{{ macros.contributors() }}

5.26.0

1 day ago

5.25.0

10 days ago

5.24.1

21 days ago

5.24.0

24 days ago

5.23.3

28 days ago

5.23.2

29 days ago

5.23.1

30 days ago

5.23.0

1 month ago

5.22.0

2 months ago

5.21.0

2 months ago

5.20.3

2 months ago

5.20.2

2 months ago

5.20.1

2 months ago

5.20.0

2 months ago

5.19.6

3 months ago

5.19.5

3 months ago

5.19.4

3 months ago

5.19.3

4 months ago

5.19.2

4 months ago

5.19.1

4 months ago

5.19.0

5 months ago

5.18.0

5 months ago

5.17.0

5 months ago

5.15.0

6 months ago

5.16.3

6 months ago

5.16.2

6 months ago

5.16.1

6 months ago

5.16.0

6 months ago

5.9.9

10 months ago

5.9.8

10 months ago

5.9.7

10 months ago

5.9.6

10 months ago

5.9.5

10 months ago

5.9.4

10 months ago

5.9.3

10 months ago

5.10.2

10 months ago

5.10.1

10 months ago

5.10.0

10 months ago

5.9.10

10 months ago

5.9.11

10 months ago

5.9.12

10 months ago

5.11.5

8 months ago

5.11.4

8 months ago

5.11.3

8 months ago

5.11.2

8 months ago

5.11.1

9 months ago

5.11.0

9 months ago

5.12.0

8 months ago

5.13.3

7 months ago

5.13.2

7 months ago

5.13.1

7 months ago

5.13.0

7 months ago

5.14.0

6 months ago

5.9.0

11 months ago

5.8.7

11 months ago

5.8.6

12 months ago

5.8.5

12 months ago

5.8.4

12 months ago

5.8.3

1 year ago

5.8.2

1 year ago

5.8.1

1 year ago

5.8.0

1 year ago

5.4.4

1 year ago

5.5.4

1 year ago

5.5.3

1 year ago

5.5.2

1 year ago

5.5.1

1 year ago

5.5.0

1 year ago

5.6.0

1 year ago

5.7.3

1 year ago

5.7.2

1 year ago

5.7.0

1 year ago

5.4.3

1 year ago

5.4.2

1 year ago

5.3.2

1 year ago

5.3.1

1 year ago

5.4.1

1 year ago

5.4.0

1 year ago

5.3.0

1 year ago

5.2.1

1 year ago

5.2.0

1 year ago

5.0.0-alpha.3

1 year ago

5.0.0-alpha.2

1 year ago

5.0.1

1 year ago

5.0.0

1 year ago

5.1.0

1 year ago

5.0.0-alpha.1

1 year ago

4.9.0

2 years ago

4.9.2

2 years ago

4.9.1

2 years ago

4.8.5

2 years ago

4.8.4

2 years ago

4.8.6

2 years ago

4.7.2

2 years ago

4.7.3

2 years ago

4.8.0

2 years ago

4.6.1

2 years ago

4.6.0

2 years ago

4.7.0

2 years ago

4.5.0

2 years ago

4.4.0

2 years ago

4.3.0

2 years ago

4.2.1

2 years ago

3.6.0

2 years ago

4.1.0

2 years ago

4.0.0

2 years ago

4.2.0

2 years ago

3.3.0-rc.0

2 years ago

3.4.0

2 years ago

3.3.1

2 years ago

3.1.3

2 years ago

3.3.0

2 years ago

3.2.0

2 years ago

3.5.0

2 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

2.8.2

2 years ago

3.0.0

2 years ago

2.5.0

2 years ago

2.4.0

2 years ago

2.3.1

3 years ago

2.7.0

2 years ago

2.5.2

2 years ago

2.6.0

2 years ago

2.5.1

2 years ago

2.8.1

2 years ago

2.8.0

2 years ago

2.5.3

2 years ago

2.3.0

3 years ago