Language preferences are not preserved
Dup4 opened this issue · comments
Duplicate4 commented
Describe the bug
iShot_2023-10-30_08.24.56.mp4
As you can see in the video, I switched the colour theme to bright colours, as well as switching the language
And then refreshed the page
After that, the colour theme is still bright, but the language is back to English
So, I think we should make the language preference persistent in the browser as well
Reproduction
System Info
System:
OS: macOS 14.0
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 681.03 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
pnpm: 8.6.12 - ~/.nvm/versions/node/v16.16.0/bin/pnpm
Browsers:
Chrome: 118.0.5993.117
Safari: 17.0
Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.
bedirhancode commented
Hi 👋
i18n.ts
file at bottom you can set initial lang.
# here import from @vueuse/core
const state = useStorage('general-settings', { lang: 'en' })
export const install: UserModule = ({ app }) => {
app.use(i18n)
loadLanguageAsync(state.value.lang)
}
also when user changes you need to set selected to storage to read from local storage.
function setI18nLanguage(lang: Locale) {
state.value.lang = lang
i18n.global.locale.value = lang as any
if (typeof document !== 'undefined')
document.querySelector('html')?.setAttribute('lang', lang)
return lang
}