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/
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>
The Nuxt docs say you can override the default document by...
creating an app.html file in the source directory of your project which by default is the root directory.
I did just that. I created the following app.html in my project root:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
<script>alert('custom document');</script>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Note the alert(), which is just to confirm it's using the custom document.
When I serve the project it continues to use the default document, however. The docs don't say you have to do anything else to enable the custom document, other than create the file.
What am I doing wrong?
Working perfectly fine on my side.
I'm using target: static and ssr: false (works with ssr: true too).
The issue should be coming from somewhere else. Like a middleware or alike.
Internet is full of examples of applications served with Flask (api) and Vue.js (client), but since Vue is a SPA it make sense to serve it with flask as well.
I didn't find any help, especially where the App is stored in an external js.
With Firefox I get error for a disallowed type:
Loading module from “http://localhost:5000/static/App” was blocked
because of a disallowed MIME type (“text/html”).
On Chrome I just get file not found since it tries to get the App file instead of App.vue.
Here is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
{% raw %}
<div id="app">
{{ message }}
</div>
{% endraw %}
</body>
<script type="module" src="{{ url_for('static', filename='myvue.js') }}"></script>
</html>
The myvue.js
import App from './App.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
The app.vue (simply got from another example on SO):
<template>
<div id="app">
<h1>My Todo App!</h1>
<!-- <TodoList/> -->
</div>
</template>
Note that the {{message}} is useless there and can be removed. I suspect the template is also wrong, but I can't reach that point.
I'd like to be able to work without the CLI or at least being able to do all by myself to avoid another layer of dependencies (npm scares me with the huge list of deprecated stuff)
It doesn't really make sense to serve a Vue SPA app from Flask to my mind. What are you actually trying to achieve?
If you are looking to setup a configuration where a SPA app can access data on a Flask server, then the typical configuration is to build a VueJS SPA app using the CLI and Node, then deliver the compiled build directly from your web server (e.g. Apache, IIS). There's no reason to pipe the delivery of the SPA app via Flask, all that does is add a bunch of overhead.
Use Flask to expose a REST API that your SPA app can call (e.g. using AXIOS) to retrieve/write data, etc.
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.