Locale changing

Notice

⚠ Locale changing is ignored for components that use sync: false.

Information

The default language is set in the user's local storage.

Changing

Default configuration

import { createApp } from 'vue'
import App from './App.vue'
import createMultilang from "vue3multilang"
const app = createApp(App)
const messages = {
    "en-UK":{
        welcome:"Welcome, {user}!",
    },
    "ro-RO":{
        welcome:"Bine ati venit, {user}!",
    }
}
app.use(createMultilang(),{
    locale: "en-UK",
    messages,
})
app.mount('#app')

Vue3 component

<template>
  <div>
    <p>{{$t("welcome",{user:"Ricea"})}}</p>
    <button @click="changelocale">Change to ro - {{count}}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods:{
    changelocale(){
      this.count++;
      this.$lang.changeLocale("ro-RO");
    }
  },
}
</script>

Output:

• Before change

<template>
  <div>
    <p>Welcome, Ricea!</p>
    <button @click="changelocale">Change to ro - 0</button>
  </div>
</template>

• After change

<template>
  <div>
    <p>Bine ati venit, Ricea!</p>
    <button @click="changelocale">Change to ro - 0</button>
  </div>
</template>