forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: persist user's locale (#527)
+30
-1
+4
app/composables/useSettings.ts
+4
app/composables/useSettings.ts
···
1
1
import type { RemovableRef } from '@vueuse/core'
2
2
import { useLocalStorage } from '@vueuse/core'
3
3
import { ACCENT_COLORS } from '#shared/utils/constants'
4
+
import type { LocaleObject } from '@nuxtjs/i18n'
4
5
5
6
type AccentColorId = keyof typeof ACCENT_COLORS
6
7
···
16
17
accentColorId: AccentColorId | null
17
18
/** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
18
19
hidePlatformPackages: boolean
20
+
/** User-selected locale */
21
+
selectedLocale: LocaleObject['code'] | null
19
22
sidebar: {
20
23
collapsed: string[]
21
24
}
···
26
29
includeTypesInInstall: true,
27
30
accentColorId: null,
28
31
hidePlatformPackages: true,
32
+
selectedLocale: null,
29
33
sidebar: {
30
34
collapsed: [],
31
35
},
+6
-1
app/pages/settings.vue
+6
-1
app/pages/settings.vue
···
1
1
<script setup lang="ts">
2
2
const router = useRouter()
3
3
const { settings } = useSettings()
4
-
const { locale, locales, setLocale } = useI18n()
4
+
const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
5
5
const colorMode = useColorMode()
6
6
const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
7
7
···
28
28
description: () => $t('settings.tagline'),
29
29
primaryColor: '#60a5fa',
30
30
})
31
+
32
+
const setLocale: typeof setNuxti18nLocale = locale => {
33
+
settings.value.selectedLocale = locale
34
+
return setNuxti18nLocale(locale)
35
+
}
31
36
</script>
32
37
33
38
<template>
+20
app/plugins/i18n-loader.client.ts
+20
app/plugins/i18n-loader.client.ts
···
1
+
export default defineNuxtPlugin({
2
+
enforce: 'post',
3
+
env: { islands: false },
4
+
setup() {
5
+
const { $i18n } = useNuxtApp()
6
+
const { locale, locales, setLocale } = $i18n
7
+
const { settings } = useSettings()
8
+
const settingsLocale = settings.value.selectedLocale
9
+
10
+
if (
11
+
settingsLocale &&
12
+
// Check if the value is a supported locale
13
+
locales.value.map(l => l.code).includes(settingsLocale) &&
14
+
// Check if the value is not a current locale
15
+
settingsLocale !== locale.value
16
+
) {
17
+
setLocale(settingsLocale)
18
+
}
19
+
},
20
+
})