Language preferences are not preserved

[Dup4]

Describe the bug

https://github.com/antfu/vitesse/assets/38343778/ec6c2832-eb59-4f59-b915-399c19b48788

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

https://vitesse.netlify.app/

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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[bedirhancode]

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
}