-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.vue
106 lines (94 loc) · 3.3 KB
/
app.vue
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
<template>
<Html :lang="i18nHead.htmlAttrs?.lang" :dir="i18nHead.htmlAttrs?.dir">
<IntegrationEkomiWidget v-if="!isShopDisabled" :token="runtimeConfig.ekomi.popupToken" />
<LayoutThemeContext>
<NuxtLoadingIndicator />
<LazyShopOff v-if="isShopDisabled" />
<NuxtPage v-else />
<ClientOnly>
<LazyCartUnavailableModal />
<Notifications class="notifications" position="bottom right" />
</ClientOnly>
<LazyColorThemePicker v-if="showColorThemePicker" />
</LayoutThemeContext>
</Html>
</template>
<script setup lang="ts">
import { COOKIES_CONFIG, COOKIE_REQUIRED_ACCEPTED_KEY } from './consts/cookiesKeys'
import { useConfigStore } from './store/config'
const config = useConfigStore()
const runtimeConfig = usePublicRuntimeConfig()
const seo = toRef(config, 'seo')
const i18nHead = useLocaleHead({
addDirAttribute: true,
identifierAttribute: 'id',
addSeoAttributes: true,
})
const title = computed(() => seo.value.title || 'Store')
const showColorThemePicker = computed(() =>
['true', '1', 1, true].includes(runtimeConfig.showColorThemePicker),
)
const isProduction = computed(() => ['true', '1', 1, true].includes(runtimeConfig.production))
const event = useRequestEvent()
const isShopDisabled = computed(() => config.storeFrontDisabled)
if (isShopDisabled.value && event) setResponseStatus(event, 503)
useSeoMeta({
titleTemplate: (titleChunk) => (titleChunk ? `${titleChunk} - ${title.value}` : title.value),
})
useSeo(() => [
{
description: seo.value.description,
ogImage: seo.value.og_image?.url,
twitterCard: seo.value.twitter_card,
robots: 'index, follow',
},
])
useHead({
link: [
{
rel: 'stylesheet',
href: `/fonts/${runtimeConfig.fontFamily}.css`,
key: 'font-family',
fetchpriority: 'high',
},
{ rel: 'preconnect', href: runtimeConfig.apiUrl },
{ rel: 'dns-prefetch', href: runtimeConfig.apiUrl },
{ rel: 'preconnect', href: runtimeConfig.cdnUrl },
{ rel: 'dns-prefetch', href: runtimeConfig.cdnUrl },
{ rel: 'preconnect', href: runtimeConfig.directusUrl },
{ rel: 'dns-prefetch', href: runtimeConfig.directusUrl },
{ rel: 'icon', type: 'image/x-icon', href: config.faviconUrl },
...(i18nHead.value.link || []),
...(seo.value.header_tags?.filter((tag) => tag.type === 'link') || []),
],
meta: [
{
hid: isProduction.value ? 'robots' : 'force-robots',
name: 'robots',
content: isProduction.value ? 'index, follow' : 'noindex, nofollow',
},
{
hid: 'google-site-verification',
name: 'google-site-verification',
content: runtimeConfig.googleSiteVerification,
},
...(i18nHead.value.meta || []),
...(seo.value.header_tags?.filter((tag) => tag.type === 'meta') || []),
],
script: [
...(seo.value.header_tags?.filter((tag) => tag.type === 'script') || []),
{ id: 'custom-js', innerHTML: config.env?.custom_js?.toString() || '' },
],
style: [{ id: 'custom-css', innerHTML: config.env?.custom_css?.toString() || '' }],
})
onMountedDocumentLoad(() => {
const { $enableGtm } = useNuxtApp()
const requiredCookie = useStatefulCookie<number>(COOKIE_REQUIRED_ACCEPTED_KEY, COOKIES_CONFIG)
if (requiredCookie.value) $enableGtm()
}, 1500)
</script>
<style lang="scss" scoped>
.notifications {
z-index: 99999999;
}
</style>