How to save the selected language?

[botjkeee]

I used to use locale: localStorage.getItem("lang") || "ru", but what is the right way to do it here?

[dodanex]

Up! I'm trying to figure it out myself... Inside template I can use @click="$i18n.locale = 'en'" to set the language and it works without importing anything in the setup, but don't know how to set and save it inside setup, because $i18n.locale is not available. Anyone want to help?

[dodanex]

Up! I'm trying to figure it out myself... Inside template I can use @click="$i18n.locale = 'en'" to set the language and it works without importing anything in the setup, but don't know how to set and save it inside setup, because $i18n.locale is not available. Anyone want to help?

UPDATE - found a solution that works. Hope this will help others!

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const config = useRuntimeConfig()

locale.value = 'en' || config.DEFAULT_LANGUAGE

function setLocale(value) {
	locale.value = value
        // TODO: save the locale in local storage or cookie...
        // localStorage.set('locale', value)
}

onMounted(() =>{
    // TODO: get the locale from local storage or cookie and set it...
    // locale.value = localStorage.get('locale')
})
</script>

<template>
	<q-btn flat dense icon="flag" class="q-mr-md"
		><q-menu
			><q-list>
				<q-item
					v-close-popup
					clickable
					:active="$i18n.locale == 'en'"
					@click="setLocale('en')"
				>
					<q-item-section avatar>
						<q-icon name="flag" />
					</q-item-section>
					<q-item-section>
						<q-item-label>English</q-item-label>
					</q-item-section>
				</q-item>
				<q-item
					v-close-popup
					clickable
					:active="$i18n.locale == 'ro'"
					@click="setLocale('ro')"
				>
					<q-item-section avatar>
						<q-icon name="flag" />
					</q-item-section>
					<q-item-section>
						<q-item-label>Romanian</q-item-label>
					</q-item-section>
				</q-item>
			</q-list></q-menu
		></q-btn
	>
</template>

[JCAlways]

向上！我正在尝试自己弄清楚...在模板内部我可以@click="$i18n.locale = 'en'"用来设置语言并且它无需在设置中导入任何内容即可工作，但不知道如何在设置中设置和保存它，因为 $i18n.locale不可用。有人想帮忙吗？

更新 - 找到了一个有效的解决方案。希望这对其他人有帮助！

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const config = useRuntimeConfig()

locale.value = 'en' || config.DEFAULT_LANGUAGE

function setLocale(value) {
	locale.value = value
        // TODO: save the locale in local storage or cookie...
        // localStorage.set('locale', value)
}

onMounted(() =>{
    // TODO: get the locale from local storage or cookie and set it...
    // locale.value = localStorage.get('locale')
})
</script>

<template>
	<q-btn flat dense icon="flag" class="q-mr-md"
		><q-menu
			><q-list>
				<q-item
					v-close-popup
					clickable
					:active="$i18n.locale == 'en'"
					@click="setLocale('en')"
				>
					<q-item-section avatar>
						<q-icon name="flag" />
					</q-item-section>
					<q-item-section>
						<q-item-label>English</q-item-label>
					</q-item-section>
				</q-item>
				<q-item
					v-close-popup
					clickable
					:active="$i18n.locale == 'ro'"
					@click="setLocale('ro')"
				>
					<q-item-section avatar>
						<q-icon name="flag" />
					</q-item-section>
					<q-item-section>
						<q-item-label>Romanian</q-item-label>
					</q-item-section>
				</q-item>
			</q-list></q-menu
		></q-btn
	>
</template>

thank you