@yiiamee/multilinguist 1.0.14 → 1.1.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 +91 -10
- package/dist/runtime/plugin.js +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,99 @@
|
|
|
1
1
|
# Nuxt MultiLinguist module
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
5
|
-
[![License][license-src]][license-href]
|
|
6
|
-
[![Nuxt][nuxt-src]][nuxt-href]
|
|
3
|
+
Multilinguist is simple, but smoothly working module for easy and seamless localization implementation in Nuxt 3.
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
## Key Features
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
- Easy translations that you're used to
|
|
8
|
+
- Works perfectly fine on both SSR + CSR
|
|
9
|
+
- No memory leaks and running out of memory errors
|
|
10
|
+
- Autocompletion & validation of keys
|
|
11
11
|
|
|
12
|
-
##
|
|
13
|
-
|
|
14
|
-
Install the module to your Nuxt application with one command:
|
|
12
|
+
## Installation
|
|
15
13
|
|
|
16
14
|
```bash
|
|
17
|
-
|
|
15
|
+
npm install @yiiamee/multilinguist
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Then, add the module to your nuxt.config
|
|
19
|
+
|
|
20
|
+
```nuxt.config.ts
|
|
21
|
+
export default defineNuxtConfig({
|
|
22
|
+
modules: [
|
|
23
|
+
@yiiamee/multilinguist,
|
|
24
|
+
],
|
|
25
|
+
multilinguist: {
|
|
26
|
+
defaultLocale: "en", // string representing key to your default (fallback) locale
|
|
27
|
+
supportedLanguages: ["en", "es"], // array of strings representing all available locales' keys
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Then, create a "locales" directory in /public directory. This is necessary for module to access your languages.
|
|
33
|
+
|
|
34
|
+

|
|
35
|
+
|
|
36
|
+
Now, you're ready to use Multilinguist Module!
|
|
37
|
+
|
|
38
|
+
### t()—famous translate function
|
|
39
|
+
|
|
40
|
+
```vue
|
|
41
|
+
<script setup lang="ts">
|
|
42
|
+
const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translate function
|
|
43
|
+
|
|
44
|
+
const pageTitle = computed(() => {
|
|
45
|
+
return t("Hello, World");
|
|
46
|
+
});
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<template>
|
|
50
|
+
<h3>{{ pageTitle }}</h3>
|
|
51
|
+
<button>{{ t("Switch Locale") }}</button>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
You can already see how the keys auto-completion works:
|
|
56
|
+
|
|
57
|
+

|
|
58
|
+
|
|
59
|
+
And validation:
|
|
60
|
+
|
|
61
|
+

|
|
62
|
+
|
|
63
|
+
### Set another value to current locale:
|
|
64
|
+
|
|
65
|
+
```vue
|
|
66
|
+
<script setup lang="ts">
|
|
67
|
+
const { t, setLocale } = useMultilinguist();
|
|
68
|
+
// setLocale function accepts string, that should match one of defined
|
|
69
|
+
// in the nuxt.config strings from supportedLanguages array
|
|
70
|
+
|
|
71
|
+
const pageTitle = computed(() => {
|
|
72
|
+
return t("Hello, World");
|
|
73
|
+
});
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<h3>{{ pageTitle }}</h3>
|
|
78
|
+
<button @click="setLocale('es')">{{ t("Switch Locale") }}</button>
|
|
79
|
+
</template>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Get current locale
|
|
83
|
+
|
|
84
|
+
```vue
|
|
85
|
+
<script setup lang="ts">
|
|
86
|
+
const { t, setLocale, locale } = useMultilinguist();
|
|
87
|
+
// locale is SSR friendly, shared among the app ref state
|
|
88
|
+
|
|
89
|
+
const pageTitle = computed(() => {
|
|
90
|
+
return t("Hello, World");
|
|
91
|
+
});
|
|
92
|
+
</script>
|
|
93
|
+
|
|
94
|
+
<template>
|
|
95
|
+
<h3>{{ pageTitle }}</h3>
|
|
96
|
+
<h6>Current Locale: {{ locale }}</h6>
|
|
97
|
+
<button @click="setLocale('es')">{{ t("Switch Locale") }}</button>
|
|
98
|
+
</template>
|
|
18
99
|
```
|
package/dist/runtime/plugin.js
CHANGED
|
@@ -7,10 +7,10 @@ export default defineNuxtPlugin(async (nuxtApp) => {
|
|
|
7
7
|
};
|
|
8
8
|
const supportedLanguages = config.supportedLanguages;
|
|
9
9
|
const defaultLocale = config.defaultLocale;
|
|
10
|
-
const
|
|
11
|
-
await
|
|
12
|
-
console.log("[multilinguist] is initialised"
|
|
13
|
-
nuxtApp.provide("localization",
|
|
14
|
-
nuxtApp.provide("t",
|
|
15
|
-
nuxtApp._localization =
|
|
10
|
+
const { initLocalization, ...localizationProperties } = useLocalization(supportedLanguages, defaultLocale);
|
|
11
|
+
await initLocalization();
|
|
12
|
+
console.log("[multilinguist] is initialised");
|
|
13
|
+
nuxtApp.provide("localization", localizationProperties);
|
|
14
|
+
nuxtApp.provide("t", localizationProperties.t);
|
|
15
|
+
nuxtApp._localization = localizationProperties;
|
|
16
16
|
});
|