v-lang

This plugin for VUE is designed to save you from having to maintain language dictionaries for the text content of your Vuejs application and make it easier to localize it. If you are tired of the endless naming of variables in the language dictionary, this plugin is for you.

Contents

• Quick start
• Custom usage
• Settings
• Features of use

Quick start

Install

npm install @chepuhasasha/v-lang

Register the plugin in main.ts/js

import { createApp } from "vue";
import App from "./App.vue";
import VLang from "@chepuhasasha/v-lang";

createApp(App).use(VLang).mount("#app");

Use in template

If you do not specify a value for the v-lang directive, the plugin will automatically detect the language. The first two letters of novigator.language are used to define the language. (ru-RU - language will be ru)

Write the text in the format <separator><language><text> - $ru Русский текст

<template>
  <button v-lang>$ru Русский текст $en English text</button>
</template>

If your layout does not have a language suitable for the user's language, then the plugin will set the value corresponding to the en key. How to change the default language, see the settings section.

Custom usage

You can dynamically pass any key to the v-lang directive. The key can be a string of any length, for example:

<div v-lang="'some key'">$some key Привет! $some key 2 Hi!</div>

Example with dynamic key switching:

<template>
  <button @click="changeLang" v-lang="lang">$ru Русский $en English</button>
</template>

<script setup lang="ts">
  import { computed, ref } from "vue";

  const lang = ref("ru");

  const changeLang = () => {
    lang.value = lang.value === "ru" ? "ru" : "en";
  };
</script>

Settings

| option | type | default | | :---------- | ---------- | ------- | | separator | string | "$" | | defaultLand | string | "en" |

const options = {
  separator: "#"
  defaultLand: "ru"
}
createApp(App).use(VLang, options).mount("#app");

Features of use

❌ Do not do that!

<div v-lang="'ru'">
  <div>$ru Текст $en Text</div>
  <div>$ru Текст $en Text</div>
</div>

✔️ Do it like this!

<div>
  <div v-lang="'ru'">$ru Текст $en Text</div>
  <div v-lang="'ru'">$ru Текст $en Text</div>
</div>