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

What is Lokale for Vue?

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

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

Currently we support vue v3 only

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

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

Initialize lokale

import { Lokale, VuePlugin, VueLokale, FormatSimple } from '@lokale/vue';

const lokale = Lokale()
  .use(VuePlugin())
  .use(FormatSimple())
  .init({
    language: 'en',
    apiUrl: process.env.VUE_APP_LOKALE_API_URL,
    apiKey: process.env.VUE_APP_LOKALE_API_KEY,
  });

...

app.use(VueLokale, { lokale });

Then use the library in your app:

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

T component

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

<script setup>
  import { T } from '@lokale/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 '@lokale/vue';

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

or for language switching

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

<script setup>
  import { useLokale } from '@lokale/vue';

  const lokale = useLokale(['language']);

  const changeLanguage = (e) => {
    lokale.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() }}