npm package: @simple-translation-helper/vue
Description: This package provides a simple translation helper for Vue 3.
Latest version: 0.0.7

# Simple translation helper for Vue 3

This package provides a simple translation helper for Vue 3.

## Installation
```bash
npm i @simple-translation-helper/vue
```

Add styling to your `main.js`:

```javascript
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`:

```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

```vue

<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:
```vue
<template>
  <translate translation-key="dashboard.title" translation="Welcome to my dashboard">
    Fallback text
  </translate>
</template>
```