Vue3-lang-js

This library is a Vue 3 plugin that wraps the Lang.js library. If you're working in Laravel, you might be interested to check out this package.

This library takes inspiration from @eli5/vue-lang-js.

Installation

To install this project with:

NPM

npm install vue3-lang

Yarn

yarn add vue3-lang

Initialization

// messages.js
export const messages = {
    "en.messages": {
        // Pipe '|' defines singular and plural values
        "buttonLabel": "Cancel|Plural",
        // Defines the amount or range accepted for each value
        'apple': '{0} There are none|[1,19] There are some|[20,*] There are many',
        "header": "Calculate weight",
        "footer": {
            "saveButtonLabel": "Save",
            "cancelButtonLabel": "Cancel"
        }
    },
    "es.messages": {
        "buttonLabel": "Cancelar",
        "header": "Calcular peso",
        "footer": {
            "saveButtonLabel": "Guardar",
            "cancelButtonLabel": "Cancelar"
        }
    }
}

import { createApp } from 'vue'
import App from './App.vue'

import Vue3Lang from 'vue3-lang'
import { messages } from "@/messages.js";

createApp(App).use(Vue3Lang, {
    messages: messages, // The translation source
    locale: 'en', // Set your default locale
    fallback: 'es' // Set your fallback locale
}).mount('#app')

Usage

Vue3-Lang provides two methods: $t and its alias $trans that are injected globally in your Vue application.

We also provide the lang instance that can accessed through the inject syntax (see below).

Simple usage

<template>
  {{ $t('messages.buttonLabel) }}
  <button>{{ cancelButton }}</button>
</template>

<script setup>
  import { inject } from "vue";

  const $t = inject('$trans') // or $t
  const cancelButton = $trans('messages.cancelButton')
</script>

Get the translation value:

$trans('messages.cancelButton')

Get the translation value for another locale

$trans('messages.cancelButton', {}, 'es')

Get the singular translation value

$trans('messages.cancelButton', 1)

Get the plural translation value

$trans('messages.cancelButton', 2)