Skip to content

Commit dbcf776

Browse files
daaru00daaru00
committed
Initial commit
0 parents  commit dbcf776

7 files changed

+337
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Rishabh Chawla
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
# Gridsome i18n plugin
2+
3+
[![npm](https://img.shields.io/npm/v/gridsome-plugin-i18n.svg)](https://www.npmjs.com/package/gridsome-plugin-i18n)
4+
5+
A [i18n](https://kazupon.github.io/vue-i18n/) plugin for [Gridsome](https://gridsome.org/).
6+
7+
## Install
8+
9+
- `yarn add gridsome-plugin-i18n`
10+
- `npm install gridsome-plugin-i18n --save`
11+
12+
## Getting Started
13+
14+
```js
15+
module.exports = {
16+
plugins: [
17+
{
18+
use: "gridsome-plugin-i18n",
19+
options: {
20+
locales: [ // Locales list
21+
'it-it',
22+
'fr-fr',
23+
'de-de',
24+
'en-gb'
25+
],
26+
pathAliases: { // Path segment alias for each locales
27+
'it-it': 'it',
28+
'fr-fr': 'fr',
29+
'de-de': 'de',
30+
'en-gb': 'en'
31+
},
32+
fallbackLocale: 'en-gb', // fallback language
33+
defaultLocale: 'en-gb', // default language
34+
messages: {
35+
'it-it': require('./src/locales/it-it.json'), // Messages files
36+
'fr-fr': require('./src/locales/fr-fr.json'),
37+
'de-de': require('./src/locales/de-de.json'),
38+
'en-gb': require('./src/locales/en-gb.json'),
39+
}
40+
}
41+
}
42+
]
43+
};
44+
```
45+
46+
## Options
47+
48+
#### locales
49+
50+
- Type: `string[]` _required_
51+
52+
A list of all supported locales.
53+
54+
#### messages
55+
56+
- Type: `object` _required_
57+
58+
Declaration of JSON messages files, for more info check [VueI18n's doc](https://kazupon.github.io/vue-i18n/guide/formatting.html).
59+
60+
#### pathAliases
61+
62+
- Type: `object`
63+
64+
A list of locale's path segment to use, if not provided the locale code will be use to generate url.
65+
66+
#### fallbackLocale
67+
68+
- Type: `string`
69+
70+
Language to use when your preferred language lacks a translation, for more info check [VueI18n's doc](https://kazupon.github.io/vue-i18n/guide/fallback.html).
71+
72+
#### defaultLocale
73+
74+
- Type: `string`
75+
76+
Default locale to use in page's path without locale segment in it.
77+
78+
## Usage
79+
80+
This plugin will install and configure [Vue I18n](https://kazupon.github.io/vue-i18n/introduction.html), so refer to it about usage.
81+
82+
### URL generation
83+
84+
This plugin will load all pages already declared and generate pages for all locales adding a path prefix with the locale code.
85+
86+
For example, if you have these paths:
87+
```
88+
/ -> component home
89+
/about -> component about
90+
/blog/article1 -> component article
91+
/blog/article2 -> component article
92+
```
93+
this plugin, with these locales:
94+
```js
95+
module.exports = {
96+
plugins: [
97+
{
98+
use: "gridsome-plugin-i18n",
99+
options: {
100+
locales: [
101+
'it-it',
102+
'en-gb'
103+
],
104+
}
105+
}
106+
]
107+
};
108+
```
109+
will generate these pages:
110+
```
111+
/ -> component home
112+
/it-it/ -> component home
113+
/en-gb/ -> component home
114+
/en-gb/about -> component about
115+
/it-it/about -> component about
116+
/about -> component about
117+
/it-it/about -> component about
118+
/en-gb/about -> component about
119+
/blog/article1 -> component article
120+
/it-it/blog/article1 -> component article
121+
/en-gb/blog/article1 -> component article
122+
/blog/article2 -> component article
123+
/it-it/blog/article2 -> component article
124+
/en-gb/blog/article2 -> component article
125+
```
126+
127+
using path aliases:
128+
```js
129+
module.exports = {
130+
plugins: [
131+
{
132+
use: "gridsome-plugin-i18n",
133+
options: {
134+
locales: [
135+
'it-it',
136+
'en-gb'
137+
],
138+
pathAliases: {
139+
'it-it': 'it',
140+
'en-gb': 'en'
141+
},
142+
}
143+
}
144+
]
145+
};
146+
```
147+
will generate these pages:
148+
```
149+
/ -> component home
150+
/it/ -> component home
151+
/en/ -> component home
152+
/en/about -> component about
153+
/it/about -> component about
154+
/about -> component about
155+
/it/about -> component about
156+
/en/about -> component about
157+
/blog/article1 -> component article
158+
/it/blog/article1 -> component article
159+
/en/blog/article1 -> component article
160+
/blog/article2 -> component article
161+
/it/blog/article2 -> component article
162+
/en/blog/article2 -> component article
163+
```
164+
165+
### Content translation
166+
167+
This plugin will set a context property to store current locale:
168+
```html
169+
<template>
170+
<span>
171+
Current locale: {{ $context.locale }}
172+
</span>
173+
</template>
174+
```
175+
176+
Using VueI18n:
177+
```html
178+
<template>
179+
<span>
180+
Current locale: {{ $i18n.locale }}
181+
</span>
182+
</template>
183+
```
184+
and translate string using `$t` helper:
185+
```html
186+
<template>
187+
<span>
188+
{{ $t('my-message') }}
189+
</span>
190+
</template>
191+
```
192+

Diff for: ‎gridsome.client.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import VueI18n from 'vue-i18n'
2+
/**
3+
* i18n client plugin initialization
4+
*
5+
* @param Vue
6+
* @param options
7+
*/
8+
export default function (Vue, options, { appOptions }) {
9+
// Setup options fallback
10+
options.defaultLocale = options.defaultLocale || options.locales[0]
11+
options.fallbackLocale = options.fallbackLocale || options.defaultLocale
12+
13+
// Create i18n plugin
14+
window.Vue = Vue
15+
const i18n = new VueI18n(Object.assign(options, {
16+
locale: options.defaultLocale
17+
}))
18+
appOptions.i18n = i18n
19+
20+
// Create mixin to load locale base on context
21+
Vue.mixin({
22+
created: function () {
23+
if (this.$context && this.$context.locale) {
24+
const currentLocaleCode = this.$context.locale
25+
if (i18n.locale !== currentLocaleCode) {
26+
i18n.locale = currentLocaleCode
27+
}
28+
}
29+
}
30+
})
31+
}

Diff for: ‎gridsome.server.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const path = require('path')
2+
3+
class VueI18n {
4+
/**
5+
* Default plugin options
6+
*/
7+
static defaultOptions () {
8+
return {
9+
locales: [],
10+
pathAliases: [],
11+
defaultLocale: null,
12+
i18n: {}
13+
}
14+
}
15+
16+
/**
17+
*
18+
* @param {*} api
19+
* @param {*} options
20+
*/
21+
constructor (api, options) {
22+
this.api = api
23+
this.pages = api._app.pages
24+
this.options = options
25+
this.options.defaultLocale = options.defaultLocale || options.locales[0]
26+
api.createManagedPages(this.createManagedPages.bind(this))
27+
}
28+
29+
/**
30+
* Create manage pages
31+
*
32+
* @param {function} param.findPages
33+
* @param {function} param.createPage
34+
*/
35+
createManagedPages({ findPages, createPage }) {
36+
// List all pages
37+
const pages = findPages();
38+
for (const page of pages) {
39+
// Load page's route
40+
const route = this.pages.getRoute(page.internal.route)
41+
for (const locale of this.options.locales) {
42+
// Create a page clone on a path with locale segment
43+
const pathSegment = this.options.pathAliases[locale] || locale
44+
createPage({
45+
path: path.join(`/${pathSegment}/`, route.path),
46+
component: route.component,
47+
context: {
48+
locale: `${locale}`
49+
}
50+
})
51+
}
52+
// Set default locale on pages without locale segment
53+
page.context = Object.assign(page.context || {}, {
54+
locale: this.options.defaultLocale
55+
})
56+
}
57+
}
58+
59+
}
60+
61+
module.exports = VueI18n

Diff for: ‎package-lock.json

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "gridsome-plugin-i18n",
3+
"version": "1.0.0",
4+
"description": "Gridsome plugin for i18n",
5+
"main": "index.js",
6+
"keywords": [
7+
"gridsome", "i18n"
8+
],
9+
"author": "Fabio Gollinucci <[email protected]>",
10+
"license": "MIT",
11+
"files": [
12+
"gridsome.client.js",
13+
"gridsome.server.js"
14+
],
15+
"dependencies": {
16+
"vue-i18n": "^8.15.5"
17+
}
18+
}

0 commit comments

Comments
 (0)