Nuxt 3 config head script set data attribute
Help me please. I have strange isue with setting data-attributes correctly in nuxt.config.ts
I need to have script like this in head block
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="00b06111-8111-4169-a514-5b3b6e111111" data-blockingmode="auto" type="text/javascript"></script>
and I try to make it this way in config
app: {
head: {
script: [
{
id: 'Cookiebot',
src: 'https://consent.cookiebot.com/uc.js',
'data-cbid': '00b0646b-80ee-4169-a514-5b3b6e297aab',
'data-blockingmode': 'auto',
type: 'text/javascript',
},
]
}
}
the problrm is with these two lines as they cause error
[nuxt] error caught during app initialization TypeError: Cannot read properties of undefined (reading 'app')
4 Replies
this looks correct enough, although you don't need the type: type/javascript
maybe share the entire nuxt.config.ts file
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: {
lang: 'en',
},
script: [
{
id: 'Cookiebot',
src: 'https://consent.cookiebot.com/uc.js',
'data-cbid': '00b0646b-80ee-4169-a514-5b3b6e297aab',
'data-blockingmode': 'auto',
type: 'text/javascript',
},
{
hid: 'recaptcha',
src: 'https://www.google.com/recaptcha/api.js?render=' + process.env.NUXT_PUBLIC_CAPTCHA_SITE_KEY,
defer: true,
},
{ src: '/scripts/smartlook.js', defer: true },
{
src: 'https://business-tickets.com/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js',
defer: true,
},
],
link: [
{ href: 'https://fonts.googleapis.com', rel: 'preconnect' },
{ href: 'https://fonts.gstatic.com', rel: 'preconnect', crossorigin: 'anonymous' },
{ href: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap', rel: 'stylesheet' },
{ rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
{ rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'manifest', href: '/site.webmanifest' },
{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' },
],
msapplicationTileColor: '#da532c',
themeColor: '#ffffff',
viewport: 'width=device-width, initial-scale=1',
language: 'English',
},
},
routeRules: {
'/flight': { sitemap: { lastmod: '2024-07-11' } },
'/privacy-policy': { sitemap: { lastmod: '2024-07-11' } },
'/terms-and-conditions': { sitemap: { lastmod: '2024-07-11' } },
'/thanks': { sitemap: { lastmod: '2024-07-11' } },
},
runtimeConfig: {
public: {
strapiApiUrl: '',
appUrl: '',
crmUrl: '',
captchaSiteKey: '',
captchaSecretKey: '',
googleMapsApiKey: '',
googleMeasurementId: '',
googleMeasurementApiSecret: '',
googleAnalyticsClientId: '',
amadeusApiKey: '',
amadeusApiSecret: '',
amadeusApiMode: '',
},
},
build: {
transpile: ['@vuepic/vue-datepicker', '@fawmi/vue-google-maps'],
extractCSS: true,
},
nitro: {
compressPublicAssets: true,
},
modules: [
'@pinia/nuxt',
'@pinia-plugin-persistedstate/nuxt',
'@nuxt/image',
'nuxt-simple-sitemap',
'nuxt-simple-robots',
'@nuxtjs/tailwindcss',
'nuxt-gtag',
'nuxt-utm',
'@nuxtjs/sitemap',
'yandex-metrika-module-nuxt3',
],
yandexMetrika: {
id: '98232420',
webvisor: true,
},
robots: {
UserAgent: '*',
Disallow: '',
},
gtag: {
id: 'GTM-T6VNP4C',
loadingStrategy: 'defer',
},
image: {
quality: 80,
format: ['webp', 'avif'],
},
postcss: {
plugins: {},
},
css: ['~/assets/css/main.css'],
components: [
{
path: '~/components',
},
],
sitemap: {
sources: ['/api/sitemap/urls'],
},
});
here is full nuxt.config.ts
hm maybe try do a
npx nuxi cleanup
and re-runno effect