> For the complete documentation index, see [llms.txt](https://raul202.gitbook.io/vue3-multilang/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://raul202.gitbook.io/vue3-multilang/guide/locale-changing.md).

# Locale changing

{% hint style="warning" %}
Notice

<mark style="color:yellow;">⚠</mark> Locale changing is ignored for components that use `sync:` **false**.
{% endhint %}

### Information

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

### Changing

Default configuration

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

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

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

* After change

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