@yiiamee/multilinguist 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -1
- package/dist/module.json +3 -2
- package/dist/module.mjs +5 -3
- package/dist/runtime/composables/useLocalization.d.ts +3 -2
- package/dist/runtime/composables/useLocalization.js +7 -3
- package/dist/runtime/composables/useMultilinguist.d.ts +2 -0
- package/dist/runtime/plugin.js +8 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@ applications.
|
|
|
9
9
|
- Works perfectly fine on both SSR + CSR
|
|
10
10
|
- No memory leaks and running out of memory errors
|
|
11
11
|
- Autocompletion & validation of keys
|
|
12
|
+
- Autodetection of browser's locale
|
|
12
13
|
|
|
13
14
|
## Installation
|
|
14
15
|
|
|
@@ -49,7 +50,7 @@ Also, on both SSR and CSR, you will see the following message:
|
|
|
49
50
|
|
|
50
51
|
It indicated that the module has been initialized successfully.
|
|
51
52
|
|
|
52
|
-
To disable logs, you can set the logging option in your nuxt.config to false (by default, it is true):
|
|
53
|
+
To disable logs, you can set the `logging` option in your nuxt.config to `false` (by default, it is `true`):
|
|
53
54
|
|
|
54
55
|
```nuxt.config.ts
|
|
55
56
|
export default defineNuxtConfig({
|
|
@@ -63,6 +64,24 @@ export default defineNuxtConfig({
|
|
|
63
64
|
},
|
|
64
65
|
})
|
|
65
66
|
```
|
|
67
|
+
Also, Multilinguist offers a functionality to set the default browser's locale as default if it is available in the supported languages array.
|
|
68
|
+
|
|
69
|
+
To disable this option, you can set the `setBrowserLanguage` option to `false` as it is `true` by default:
|
|
70
|
+
|
|
71
|
+
```nuxt.config.ts
|
|
72
|
+
export default defineNuxtConfig({
|
|
73
|
+
modules: [
|
|
74
|
+
"@yiiamee/multilinguist",
|
|
75
|
+
],
|
|
76
|
+
multilinguist: {
|
|
77
|
+
defaultLocale: "en",
|
|
78
|
+
supportedLanguages: ["en", "es"],
|
|
79
|
+
logging: false,
|
|
80
|
+
setBrowserLanguage: false, // by default: true
|
|
81
|
+
},
|
|
82
|
+
})
|
|
83
|
+
```
|
|
84
|
+
|
|
66
85
|
|
|
67
86
|
# Usage
|
|
68
87
|
|
|
@@ -168,4 +187,30 @@ And validation:
|
|
|
168
187
|
<h6>Current Locale: {{ locale }}</h6>
|
|
169
188
|
<button @click="setLocale('es')">{{ t("Switch Locale") }}</button>
|
|
170
189
|
</template>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### Get locales list
|
|
193
|
+
|
|
194
|
+
```vue
|
|
195
|
+
|
|
196
|
+
<script setup lang="ts">
|
|
197
|
+
const { t, setLocale, locale, locales } = useMultilinguist();
|
|
198
|
+
// Locales is a computed ref, which value is being set from your nuxt.config
|
|
199
|
+
|
|
200
|
+
const pageTitle = computed(() => {
|
|
201
|
+
return t("Hello, World");
|
|
202
|
+
});
|
|
203
|
+
</script>
|
|
204
|
+
|
|
205
|
+
<template>
|
|
206
|
+
<h3>{{ pageTitle }}</h3>
|
|
207
|
+
<h6>Current Locale: {{ locale }}</h6>
|
|
208
|
+
<span
|
|
209
|
+
v-for="localeItem from locales"
|
|
210
|
+
:key="localeItem"
|
|
211
|
+
>
|
|
212
|
+
| {{ localeItem }} |
|
|
213
|
+
</span>
|
|
214
|
+
<button @click="setLocale('es')">{{ t("Switch Locale") }}</button>
|
|
215
|
+
</template>
|
|
171
216
|
```
|
package/dist/module.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yiiamee/multilinguist",
|
|
3
3
|
"configKey": "multilinguist",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.1",
|
|
5
5
|
"compatibility": {
|
|
6
6
|
"nuxt": "^3.0.0"
|
|
7
7
|
},
|
|
8
8
|
"defaults": {
|
|
9
9
|
"logging": true,
|
|
10
10
|
"defaultLocale": "",
|
|
11
|
-
"supportedLanguages": []
|
|
11
|
+
"supportedLanguages": [],
|
|
12
|
+
"setBrowserLanguage": true
|
|
12
13
|
},
|
|
13
14
|
"builder": {
|
|
14
15
|
"@nuxt/module-builder": "1.0.1",
|
package/dist/module.mjs
CHANGED
|
@@ -82,14 +82,15 @@ const module = defineNuxtModule({
|
|
|
82
82
|
meta: {
|
|
83
83
|
name: "@yiiamee/multilinguist",
|
|
84
84
|
configKey: "multilinguist",
|
|
85
|
-
version: "1.3.
|
|
85
|
+
version: "1.3.1",
|
|
86
86
|
compatibility: {
|
|
87
87
|
nuxt: "^3.0.0"
|
|
88
88
|
},
|
|
89
89
|
defaults: {
|
|
90
90
|
logging: true,
|
|
91
91
|
defaultLocale: "",
|
|
92
|
-
supportedLanguages: []
|
|
92
|
+
supportedLanguages: [],
|
|
93
|
+
setBrowserLanguage: true
|
|
93
94
|
}
|
|
94
95
|
},
|
|
95
96
|
setup(moduleOptions, nuxtApp) {
|
|
@@ -99,7 +100,8 @@ const module = defineNuxtModule({
|
|
|
99
100
|
nuxtApp.options.runtimeConfig.public.multilinguist = {
|
|
100
101
|
defaultLocale: moduleOptions.defaultLocale,
|
|
101
102
|
supportedLanguages: moduleOptions.supportedLanguages,
|
|
102
|
-
logging: typeof moduleOptions.logging === "boolean" ? moduleOptions.logging : true
|
|
103
|
+
logging: typeof moduleOptions.logging === "boolean" ? moduleOptions.logging : true,
|
|
104
|
+
setBrowserLanguage: typeof moduleOptions.setBrowserLanguage === "boolean" ? moduleOptions.setBrowserLanguage : true
|
|
103
105
|
};
|
|
104
106
|
nuxtApp.hook("vite:extendConfig", (viteConfig) => {
|
|
105
107
|
viteConfig.plugins = viteConfig.plugins || [];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type Ref } from "vue";
|
|
1
|
+
import { type Ref, type ComputedRef } from "vue";
|
|
2
2
|
import type { LocaleKey } from "../types/generated-locales.js";
|
|
3
3
|
export type TranslationMap = readonly string[];
|
|
4
4
|
export type Locale<T extends TranslationMap> = T[number];
|
|
@@ -8,5 +8,6 @@ export type TMultilinguistResponse<T extends TranslationMap> = {
|
|
|
8
8
|
setLocale: (locale: Locale<T>) => void;
|
|
9
9
|
initLocalization: () => Promise<void>;
|
|
10
10
|
locale: Ref<Locale<T>>;
|
|
11
|
+
locales: ComputedRef<T>;
|
|
11
12
|
};
|
|
12
|
-
export default function useLocalization<const T extends TranslationMap>(supportedLanguages: T, defaultLocale: Locale<T
|
|
13
|
+
export default function useLocalization<const T extends TranslationMap>(supportedLanguages: T, defaultLocale: Locale<T>, setBrowserLanguage?: boolean): TMultilinguistResponse<T>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import useLocale from "../composables/useLocale.js";
|
|
2
2
|
import { useCookie, useState } from "nuxt/app";
|
|
3
3
|
import { computed, watch } from "vue";
|
|
4
|
-
export default function useLocalization(supportedLanguages, defaultLocale) {
|
|
4
|
+
export default function useLocalization(supportedLanguages, defaultLocale, setBrowserLanguage = true) {
|
|
5
5
|
const { locale: userBrowserLocale } = useLocale(supportedLanguages, defaultLocale);
|
|
6
6
|
const userSelectedLocale = useCookie("multilinguist-locale", {
|
|
7
|
-
default: () => supportedLanguages.includes(userBrowserLocale.value) ? userBrowserLocale.value : defaultLocale
|
|
7
|
+
default: () => supportedLanguages.includes(userBrowserLocale.value) && setBrowserLanguage ? userBrowserLocale.value : defaultLocale
|
|
8
8
|
});
|
|
9
9
|
const localeFiles = import.meta.glob("@/public/locales/*.json", { eager: true });
|
|
10
10
|
const loadedLanguages = useState("loaded-languages", () => ({}));
|
|
@@ -50,6 +50,9 @@ export default function useLocalization(supportedLanguages, defaultLocale) {
|
|
|
50
50
|
await loadLocaleMessages(defaultLocale);
|
|
51
51
|
await setLocale(userPrefferableLocale.value);
|
|
52
52
|
};
|
|
53
|
+
const locales = computed(() => {
|
|
54
|
+
return supportedLanguages;
|
|
55
|
+
});
|
|
53
56
|
watch(
|
|
54
57
|
() => locale.value,
|
|
55
58
|
async (val) => {
|
|
@@ -62,6 +65,7 @@ export default function useLocalization(supportedLanguages, defaultLocale) {
|
|
|
62
65
|
t,
|
|
63
66
|
setLocale,
|
|
64
67
|
initLocalization,
|
|
65
|
-
locale
|
|
68
|
+
locale,
|
|
69
|
+
locales
|
|
66
70
|
};
|
|
67
71
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import type { TranslationMap } from "./useLocalization.js";
|
|
1
2
|
export default function useMultilinguist(): {
|
|
2
3
|
t<K extends import("../types/generated-locales.js").LocaleKey>(key: K, variables?: Record<string, string>): string;
|
|
3
4
|
setLocale: (locale: string) => void;
|
|
4
5
|
initLocalization: () => Promise<void>;
|
|
5
6
|
locale: import("vue").Ref<string, string>;
|
|
7
|
+
locales: import("vue").ComputedRef<TranslationMap>;
|
|
6
8
|
};
|
package/dist/runtime/plugin.js
CHANGED
|
@@ -4,11 +4,17 @@ export default defineNuxtPlugin(async (nuxtApp) => {
|
|
|
4
4
|
const config = nuxtApp.$config.public.multilinguist || {
|
|
5
5
|
defaultLocale: "en",
|
|
6
6
|
supportedLanguages: ["en"],
|
|
7
|
-
logging: true
|
|
7
|
+
logging: true,
|
|
8
|
+
setBrowserLanguage: true
|
|
8
9
|
};
|
|
9
10
|
const supportedLanguages = config.supportedLanguages;
|
|
10
11
|
const defaultLocale = config.defaultLocale;
|
|
11
|
-
const
|
|
12
|
+
const shouldSetBrowserLanguage = config.setBrowserLanguage;
|
|
13
|
+
const { initLocalization, ...localizationProperties } = useLocalization(
|
|
14
|
+
supportedLanguages,
|
|
15
|
+
defaultLocale,
|
|
16
|
+
shouldSetBrowserLanguage
|
|
17
|
+
);
|
|
12
18
|
await initLocalization();
|
|
13
19
|
if (nuxtApp.$config.public.multilinguist.logging) {
|
|
14
20
|
console.log("[multilinguist] is initialised");
|