I have a nuxt app, I'm trying to add GoogleTagManager noscript to <body>.
As far as I know, the only way to do so is to add a custom app.html, here is mine:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=xxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
{{ APP }}
</body>
</html>
Now this works fine, however the innerHTML part, the <iframe></iframe> is escaped.
This is what I get when I inspect the element:
<body>
<noscript>
"<iframe src="https://www.googletagmanager.com/ns.html?id=xxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe>"
</noscript>
.
.
.
</body>
How do I get rid of these double quotes ?
You shouldn't modify any generated html code in your Nuxt app. What you should do instead is create/use a plugin.
There is a GoogleTagManager wrapper plugin for Nuxt.js that you should use instead:
https://www.npmjs.com/package/#nuxtjs/google-tag-manager
Follow the instruction and you will be ready to go.
Related
I would like to add <body><noscript><h1>Please enable your javascript<h1></noscript></body> in the developer mode.
I tried to configure it in the nuxt.config.js file but it didn't worked.
If you want to setup a noscript tag, you need to create an app.html in the root directory of your project as explained in the documentation.
Like this
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<noscript>Your browser does not support JavaScript!</noscript>
{{ APP }}
</body>
</html>
Keep in mind that if you're using ssr: true, you will still get some content even if the JS is disabled because the content will be generated on the server for some parts.
I'm generating static page templates using Vue/Nuxt and I can't figure out if there's any way to add a really specific tag into the of each page that is generated. It isn't a meta, script, style or link - and it seems the only default ways in nuxt.config.js are for scripts, links or meta tags. These are the tags that need to be injected in:
<v65:metaTags></v65:metaTags>
<v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
Those tags are generated from the CMS system and unfortunately need to be on every page. Thanks.
In nuxt you can overwrite the default .nuxt/views/app.template.html.
You need to create app.html file in the root of the project. Then put the below code inside this file:
app.html
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Then you can put any tag you want in head tag.
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<v65:metaTags></v65:metaTags>
<v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Sorry if this is asked, just not sure what to search for. Is there a way to change the template that's used to generate the index.html file when building a Nuxt app in spa mode?
For overwriting the .nuxt/views/app.template.html, you need to create app.html file at the root of the project. You can then, copy-paste the general content from app.template.html and start modifying things.
For eg - I have to add the lang attribute to the html tag, so I have updated the code a bit in my app.html
app.html
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Like #Ohgodwhy said There is no index.html with nuxt.
Nuxt 3 :
You can use defineNuxtConfig to fill the head for your whole application
Or you can use useHead in your pages to define programmatically the head of you page and those values can also be reactive.
Nuxt 2 :
You can change everything that you want with vue-meta that is used by default in nuxt see more : https://nuxtjs.org/api/pages-head/
I'm new to Vue.js and trying to test semantic binding. I have Vue.js in the same directory as my test page but I get a Vue warning of "Cannot find element: #growler". Am I doing this correct?
html
<head>
<title>
Growler
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="growler"></div>
<h2> {{ appName }} </h2>
</body>
app.js
var growler = new Vue({
el: '#growler',
data: {
appName: 'Growler'
}
});
Your HTML-markup is wrong.
The closing div tag has to be after the h2, otherwise the variable appName will not be found.
<div id="growler">
<h2> {{ appName }} </h2>
</div>
The error "Cannot find element: #growler" probably appears, because you include app.js in the head. Either move it downwards before the closing body tag or add some window.onload-condition to it to make sure, the JS will be executed after rendering the inital page.
app.js script must be below the application div
Also you must put the h2 tag inside the #glower div
Because the vue application glower working only inside #glower div
<div id="growler">
<h2> {{ appName }} </h2>
</div>
<head>
<title>
Growler
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="growler">
<h2> {{ appName }} </h2>
</div>
<script src="vue.js"></script>
<script src="app.js"></script>
</body>
There was a error in your HTML.
I always build my SPA apps with the vue-cli.
This time I'm building a small project and I'm incluing Vue with a script tag.
But I don't understand the following behavior.
// app.js
Vue.component('todo-item', {
template: `<div>Todo Component!</div>`
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue App!'
}
})
The HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
<div>
Just some content...
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
The result is this:
Now, I'll try to add '<todo-item />' Component inside the HTML:
<div id="app">
{{ message }}
<todo-item />
<div>
Just some content...
</div>
</div>
The text 'Just some content...' disappeared:
What Am I doing wrong?
TL;DR;
instead of <todo-item/> use <todo-item></todo-item>
Un-compiled vue.js does not support self-closing html tags.
see style guide:
Unfortunately, HTML doesn’t allow custom elements to be self-closing -
only official “void” elements. That’s why the strategy is only
possible when Vue’s template compiler can reach the template before
the DOM, then serve the DOM spec-compliant HTML.
https://v2.vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended
and issues in github:
https://github.com/vuejs/vue/issues/1036
https://github.com/vuejs/vue/issues/8664