Simple translation helper for Vue 3

This package provides a simple translation helper for Vue 3.

Installation

npm i @simple-translation-helper/vue

Add styling to your main.js:

import "@simple-translation-helper/vue/style.css"

If you want the ability to display the translation keys add the translation-hub component to your App.vue:

<translation-hub :active="conditionToShowHub"/>

Translation hub

The translation-hub is a button that you can use to display the translation keys. This is useful for debugging and for providing a way for translators to see the keys that need to be translated.

Props

| Prop | Type | Default | Description | | --------- |-----------| ------- |--------------------------------------------------------------------------------------------------------------------------------------------| | active | Boolean | false | Determines whether the component is active or not. | | activeBackgroundColor | String | #0891b2 | Determines the active color of the transltion hub button. | | position | String | "top-right" | Determines the position of the component on the page. It must be one of "top-left", "top-right", "bottom-left", or "bottom-right". |

Slots

The component has one default slot that can be used to provide custom content to be displayed instead of the translation keys toggle button. The slot can receive the following property:

| Property | Type | Description | | -------------------------| -------- |---------------------------------------------| | showTranslationKeys | Function | A function that shows the translation keys. | | hideTranslationKeys | Function | A function that hides the translation keys |

Example Usage with slots

<template>
  <div>
    <translation-hub>
      <template #default="{ showTranslationKeys, hideTranslationKeys }">
        <button @click="showTranslationKeys">
          Show keys
        </button>
        <button @click="hideTranslationKeys">
          Show keys
        </button>
      </template>
    </translation-hub>
  </div>
</template>

Translate Component

The translate component designed to display translations of text and give you the option to display the translation key.

Props

| Name | Type | Required | Description | | --- | --- | --- |-----------------------------------------------------------------------| | translationKey | String | Yes | The translation key | | translation | String | Yes | The translated text |

Slots

The translate component has one default slot, which can be used to provide custom content for the component.

Usage example

Here is an example of how you can use the translate component:

<template>
  <translate translation-key="greeting" translation="Hello, world!" />
</template>

In this example, the component will look up the translation for the greeting key with your translation method. If a translation is found, it will be displayed. Otherwise, the default text "Hello, world!" will be displayed.

You can also use the default slot to provide custom content:

<template>
  <translate translation-key="dashboard.title" translation="Welcome to my dashboard">
    Fallback text
  </translate>
</template>