vue-intlayer 5.3.11 → 5.3.12
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 +75 -29
- package/package.json +10 -9
package/README.md
CHANGED
|
@@ -5,70 +5,116 @@
|
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
7
|
<div align="center">
|
|
8
|
-
<a href="https://www.npmjs.com/package/
|
|
9
|
-
<img alt="npm" src="https://img.shields.io/npm/v/
|
|
8
|
+
<a href="https://www.npmjs.com/package/vue-intlayer">
|
|
9
|
+
<img alt="npm" src="https://img.shields.io/npm/v/vue-intlayer.svg?labelColor=49516F&color=8994BC" />
|
|
10
10
|
</a>
|
|
11
|
-
<a href="https://npmjs.org/package/
|
|
12
|
-
<img alt="downloads" src="https://badgen.net/npm/dm/
|
|
11
|
+
<a href="https://npmjs.org/package/vue-intlayer">
|
|
12
|
+
<img alt="downloads" src="https://badgen.net/npm/dm/vue-intlayer?labelColor=49516F&color=8994BC" />
|
|
13
13
|
</a>
|
|
14
|
-
<a href="https://npmjs.org/package/
|
|
15
|
-
<img alt="types included" src="https://badgen.net/npm/types/
|
|
14
|
+
<a href="https://npmjs.org/package/vue-intlayer">
|
|
15
|
+
<img alt="types included" src="https://badgen.net/npm/types/vue-intlayer?labelColor=49516F&color=8994BC"
|
|
16
16
|
/>
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
> This package is in development.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
# vue-intlayer: Internationalize (i18n) an Vue application
|
|
22
22
|
|
|
23
|
-
**
|
|
23
|
+
**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Vue, Svelte, and Express.js.
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
**The `vue-intlayer` package** allows you to internationalize your Vue application. It provides context providers and hooks for Vue internationalization.
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
## Why Internationalize Your Vue Application?
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
Internationalizing your Vue application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
## Why to integrate Intlayer?
|
|
32
|
+
|
|
33
|
+
- **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently.
|
|
34
|
+
- **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free.
|
|
35
|
+
- **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity.
|
|
32
36
|
|
|
33
37
|
## Installation
|
|
34
38
|
|
|
35
39
|
Install the necessary package using your preferred package manager:
|
|
36
40
|
|
|
37
41
|
```bash packageManager="npm"
|
|
38
|
-
npm install
|
|
42
|
+
npm install vue-intlayer
|
|
39
43
|
```
|
|
40
44
|
|
|
41
45
|
```bash packageManager="yarn"
|
|
42
|
-
yarn add
|
|
46
|
+
yarn add vue-intlayer
|
|
43
47
|
```
|
|
44
48
|
|
|
45
49
|
```bash packageManager="pnpm"
|
|
46
|
-
pnpm add
|
|
50
|
+
pnpm add vue-intlayer
|
|
47
51
|
```
|
|
48
52
|
|
|
49
53
|
## Example of usage
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
With Intlayer, you can declare your content in a structured way anywhere in your codebase.
|
|
56
|
+
|
|
57
|
+
By default, Intlayer scans for files with the extension `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`.
|
|
58
|
+
|
|
59
|
+
> You can modify the default extension by setting the `contentDir` property in the [configuration file](https://intlayer.org/doc/concept/configuration).
|
|
52
60
|
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
|
|
61
|
+
```bash codeFormat="typescript"
|
|
62
|
+
.
|
|
63
|
+
├── intlayer.config.ts
|
|
64
|
+
└── src
|
|
65
|
+
└── components
|
|
66
|
+
├── Component1
|
|
67
|
+
│ ├── index.content.ts
|
|
68
|
+
│ └── index.vue
|
|
69
|
+
└── Component2
|
|
70
|
+
├── index.content.ts
|
|
71
|
+
└── index.vue
|
|
72
|
+
```
|
|
56
73
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
74
|
+
### Declare your content
|
|
75
|
+
|
|
76
|
+
`vue-intlayer` is made to work with the [`intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/index.md).`intlayer` is a package that allows you to declare your content anywhere in your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.
|
|
77
|
+
|
|
78
|
+
Here’s an example of content declaration:
|
|
79
|
+
|
|
80
|
+
```tsx filePath="src/Component1/index.content.ts" codeFormat="typescript"
|
|
81
|
+
import { t, type Dictionary } from "intlayer";
|
|
82
|
+
|
|
83
|
+
const component1Content = {
|
|
84
|
+
key: "component-1",
|
|
85
|
+
content: {
|
|
86
|
+
myTranslatedContent: t({
|
|
87
|
+
en: "Hello World",
|
|
88
|
+
fr: "Bonjour le monde",
|
|
89
|
+
es: "Hola Mundo",
|
|
90
|
+
}),
|
|
91
|
+
numberOfCar: enu({
|
|
92
|
+
"<-1": "Less than minus one car",
|
|
93
|
+
"-1": "Minus one car",
|
|
94
|
+
"0": "No cars",
|
|
95
|
+
"1": "One car",
|
|
96
|
+
">5": "Some cars",
|
|
97
|
+
">19": "Many cars",
|
|
98
|
+
}),
|
|
99
|
+
},
|
|
100
|
+
} satisfies Dictionary;
|
|
101
|
+
|
|
102
|
+
export default component1Content;
|
|
61
103
|
```
|
|
62
104
|
|
|
63
|
-
|
|
105
|
+
### Utilize Content in Your Code
|
|
106
|
+
|
|
107
|
+
...
|
|
108
|
+
|
|
109
|
+
## Mastering the internationalization of your Vue application
|
|
64
110
|
|
|
65
|
-
|
|
111
|
+
Intlayer provides a lot of features to help you internationalize your Vue application.
|
|
66
112
|
|
|
67
|
-
|
|
113
|
+
**To learn more about these features, refer to the [Vue Internationalization (i18n) with Intlayer and Vite and Vue](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md) guide for Vite and Vue Application, or the [Vue Internationalization (i18n) with Intlayer and Vue (CRA)](https://intlayer.org/doc/environment/create-react-app) guide for Vue Create App.**
|
|
68
114
|
|
|
69
|
-
|
|
115
|
+
## Functions provided by `vue-intlayer` package
|
|
70
116
|
|
|
71
|
-
|
|
117
|
+
The `vue-intlayer` package also provides some functions to help you to internationalize your application.
|
|
72
118
|
|
|
73
119
|
## Read about Intlayer
|
|
74
120
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-intlayer",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.12",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Easily internationalize i18n your Vue applications with type-safe multilingual content management.",
|
|
6
6
|
"keywords": [
|
|
@@ -56,9 +56,9 @@
|
|
|
56
56
|
"./package.json"
|
|
57
57
|
],
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@intlayer/
|
|
60
|
-
"@intlayer/
|
|
61
|
-
"@intlayer/core": "5.3.
|
|
59
|
+
"@intlayer/chokidar": "5.3.12",
|
|
60
|
+
"@intlayer/config": "5.3.12",
|
|
61
|
+
"@intlayer/core": "5.3.12"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@types/node": "^22.13.10",
|
|
@@ -72,13 +72,14 @@
|
|
|
72
72
|
"typescript": "^5.8.2",
|
|
73
73
|
"@utils/eslint-config": "1.0.4",
|
|
74
74
|
"@utils/tsup-config": "1.0.4",
|
|
75
|
-
"@utils/ts-config
|
|
76
|
-
"@utils/ts-config": "1.0.4"
|
|
75
|
+
"@utils/ts-config": "1.0.4",
|
|
76
|
+
"@utils/ts-config-types": "1.0.4"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
|
-
"
|
|
80
|
-
"@intlayer/
|
|
81
|
-
"@intlayer/
|
|
79
|
+
"vue": "^3.5.13",
|
|
80
|
+
"@intlayer/chokidar": "5.3.12",
|
|
81
|
+
"@intlayer/config": "5.3.12",
|
|
82
|
+
"@intlayer/core": "5.3.12"
|
|
82
83
|
},
|
|
83
84
|
"engines": {
|
|
84
85
|
"node": ">=14.18"
|