/vue3-change-locale

Vue 3 Composition Api change locales with <script setup>.

Primary LanguageVue

Vue 3 Composition Api change locales

Vue 3 Composition Api change locales with <script setup>.

main.js

import { createI18n } from 'vue-i18n'

const lang = {
  // Allow compositions api (required) !!!
  allowComposition: true,
  globalInjection: true,
  legacy: false,
  
  // Locales
  locale: 'en',
  fallbackLocale: 'en',
  availableLocales: ['en', 'pl'],
  
  // Example messages
  messages: {
    en: { en: "English", pl: "Polish" },
    pl: { en: "Angielski", pl: "Polski" },
  },
}

const i18n = createI18n(lang)
app.use(i18n)

ChangeLocale.vue

<template>
	<div class="locale-changer">
		<select v-model="locale" class="locale-changer-select">
			<option v-for="lang in availableLocales" 
				:key="`locale-${lang}`" 
				:value="lang">{{ t(lang) }}</option>
		</select>
	</div>
</template>

<script setup>
import { watch, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale, availableLocales } = useI18n({ useScope: 'global' })

onMounted(() => {
	console.log('Current locale', locale.value, availableLocales)
})

watch(
	() => locale.value,
	(lang) => {
		console.log('Changed locale', lang)
		// Do something on change here ...
		// store.changeServerLang()
	}
)

const msg = computed(() => t('example.msg'))
</script>

<style scoped>
.locale-changer {
	float: right;
	width: auto;
	height: auto;
	padding: 5px;
}
.locale-changer-select {
	float: right;
	width: 50px;
	padding: 2px;
	text-align: center;
	border: 0px;
	background: transparent;
	font-size: 15px;
}
.locale-changer-select:focus {
	border: none;
	box-shadow: none;
}
</style>

Links

https://vue-i18n.intlify.dev/guide/advanced/composition.html#global-scope