-
Notifications
You must be signed in to change notification settings - Fork 12
/
gridsome.client.js
126 lines (109 loc) · 3.54 KB
/
gridsome.client.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import VueI18n from 'vue-i18n'
/**
* i18n client plugin initialization
*
* @param Vue
* @param options
*/
export default function (Vue, options, { appOptions, router, head }) {
// Setup options fallback
options.defaultLocale = options.defaultLocale || options.locales[0]
options.fallbackLocale = options.fallbackLocale || options.defaultLocale
// Add VueI18n plugin to Vue instance
Vue.use(VueI18n)
const i18n = new VueI18n(Object.assign(options, {
locale: options.defaultLocale
}))
appOptions.i18n = i18n
// Translate path to correct
function translatePath(pathToResolve, targetLocale, forceChange) {
targetLocale = targetLocale || i18n.locale
if (!targetLocale) {
return pathToResolve
}
// Disable rewrite for default language
if (
targetLocale === options.defaultLocale &&
options.rewriteDefaultLanguage === false &&
!forceChange
) {
return pathToResolve
}
// Check path segments
if (!pathToResolve.startsWith('/')) {
pathToResolve = '/' + pathToResolve
}
const pathSegment = options.pathAliases[targetLocale] || targetLocale
const pathPrefix = '/' + pathSegment
// if path already contain path prefix skip rewrite
const pathToResolveSegments = pathToResolve.split('/')
const pathToResolveLocale = options.locales.find(locale => {
const pathSegment = options.pathAliases[locale] || locale
// First element is an empty string, second is the first path segment
return pathToResolveSegments[1] === pathSegment
})
if (pathToResolveLocale !== undefined){
if (forceChange !== true) {
return pathToResolve
}
if (pathToResolveSegments.length === 0) {
return '/'
}
pathToResolve = pathToResolveSegments.slice(2).join('/')
if (!pathToResolve.startsWith('/')) {
pathToResolve = '/' + pathToResolve
}
}
// Skip adding prefix to default locale
if (
targetLocale === options.defaultLocale &&
options.rewriteDefaultLanguage === false
) {
return pathToResolve
}
// Add locale prefix
return pathPrefix + pathToResolve
}
// Add translate path helper
Vue.prototype.$tp = translatePath
// Change locale based on route meta tag
router.beforeEach((to, from, next) => {
// Change locale
if ((to.meta && to.meta.locale) && to.meta.locale !== i18n.locale) {
i18n.locale = to.meta.locale
}
next()
})
function conditionalLangAttrUpdate(updateFunction) {
const lang = i18n.locale || options.defaultLocale;
updateFunction(lang);
}
// Maintain path prefix during router change
router.beforeResolve((to, from, next) => {
// do not rewrite build paths
if (process.isServer) {
return next()
}
// if option is disabled skip whole logic
if (options.enablePathRewrite === false) {
return next()
}
// On route load, set the correct lang attribute for html tag using the current locale
conditionalLangAttrUpdate((lang) => Object.assign(head.htmlAttrs, {lang: lang}));
const translatedPath = translatePath(to.path || '/')
if (translatedPath === to.path) {
return next()
}
// Rewrite path
next({
path: translatedPath
})
})
// Update the lang attribute on each route change:
// head.htmlAttrs = { 'lang' : lang } doesn't seem to work dynamically here, only on page change or refresh
if (process.isClient) {
router.afterEach(() => {
conditionalLangAttrUpdate((lang) => document.documentElement.setAttribute('lang', lang))
})
}
}