[READ-ONLY] Mirror of https://github.com/hacknug/nuxt-boilerplate.
boilerplate-nuxt.netlify.app/
boilerplate
i18n
nuxt
nuxt-i18n
nuxtjs
vue
vue2
vuejs
vuejs2
Fix not being able to merge `head` when it is a function
Nestor Vera
(Jun 4, 2021, 7:24 PM +0200)
2de68930
887944b2
+46
-26
+17
-25
assets/nuxt.base.config.js
+17
-25
assets/nuxt.base.config.js
···
25
25
loading: false,
26
26
pageTransition: 'page',
27
27
28
-
head: () => {
29
-
const userAgent = process.client && window.navigator.userAgent
30
-
const mobileSafari = userAgent && (
31
-
(userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) &&
32
-
!(userAgent.match(/CriOS/i) || userAgent.match(/FxiOS/i))
33
-
)
34
-
35
-
return {
36
-
title: process.env.npm_package_name || '',
37
-
htmlAttrs: { lang: 'en' },
38
-
meta: [
39
-
{ charset: 'utf-8' },
40
-
{ hid: 'viewport', name: 'viewport', content: `width=device-width, initial-scale=1,${mobileSafari ? ' maximum-scale=1,' : ''} viewport-fit=cover` },
41
-
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
42
-
{ hid: 'og:site_name', property: 'og:site_name', content: process.env.npm_package_name || '' },
43
-
{ hid: 'og:type', property: 'og:type', content: 'website' },
44
-
],
45
-
link: [
46
-
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
47
-
// { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
48
-
// { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
49
-
// { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
50
-
// { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
51
-
],
52
-
}
28
+
head: {
29
+
title: process.env.npm_package_name || '',
30
+
htmlAttrs: { lang: 'en' }, // TODO: Update for i18n
31
+
meta: [
32
+
{ charset: 'utf-8' },
33
+
{ hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
34
+
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
35
+
{ hid: 'og:site_name', property: 'og:site_name', content: process.env.npm_package_name || '' },
36
+
{ hid: 'og:type', property: 'og:type', content: 'website' },
37
+
],
38
+
link: [
39
+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
40
+
// { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
41
+
// { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
42
+
// { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
43
+
// { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
44
+
],
53
45
},
54
46
55
47
build: {
+1
nuxt.config.js
+1
nuxt.config.js
+7
-1
pages/index.vue
+7
-1
pages/index.vue
···
4
4
<h1>{{ `${$t('welcome')} ${$options.name}` }}</h1>
5
5
</header>
6
6
<section>
7
-
<p>{{ $config.siteDescription }}</p>
7
+
<p>Mobile Safari detection is included in case you need to handle things differently for those users.</p>
8
+
<p>The code included on <code>safari.client.js</code> will add <code>maximum-scale=1</code> to your <code>viewport</code> meta-tag, preventing the browser from automatically zooming in on form controls with a font-size smaller than 16px.</p>
8
9
</section>
9
10
</article>
10
11
</template>
···
12
13
<script>
13
14
export default {
14
15
name: 'PageHome',
16
+
computed: {
17
+
isSafariMobile () {
18
+
return this.$isSafariMobile
19
+
},
20
+
},
15
21
}
16
22
</script>
+21
plugins/safari.client.js
+21
plugins/safari.client.js
···
1
+
export default ({ app }, inject) => {
2
+
const userAgent = process.client && window.navigator.userAgent
3
+
const isSafariMobile = userAgent && (
4
+
// NOTE: iPadOS enables [Settings.app → Safari → Request Desktop Website → All Websites] by default,
5
+
// preventing the `userAgent` from matching (it is okay, if client complains blame it on Apple).
6
+
(userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) &&
7
+
!(userAgent.match(/CriOS/i) || userAgent.match(/FxiOS/i))
8
+
)
9
+
10
+
if (isSafariMobile) {
11
+
const meta = app.head.meta
12
+
const isViewport = (i) => i.name === 'viewport'
13
+
14
+
meta[meta.findIndex(isViewport)] = {
15
+
...meta.find(isViewport),
16
+
content: `${meta.find(isViewport).content}, maximum-scale=1`,
17
+
}
18
+
}
19
+
20
+
inject('isSafariMobile', !!isSafariMobile)
21
+
}