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?
-
1There is no index.html with nuxt. What is output is generated automagically by the framework through several points of configuration. What are you attempting to accomplish here?Ohgodwhy– Ohgodwhy2019-11-08 23:23:58 +00:00Commented Nov 8, 2019 at 23:23
-
1When you do "npm run build" and you have it set to spa mode in the nuxt config, there is an index.html file that is generated in the dist folder. I'm wondering if it's possible to control what that html content looks like. If it's possible, I'd like to have that only have the script tags rather than a fully generated page with html, head, and body tags.Leo– Leo2019-11-10 07:41:13 +00:00Commented Nov 10, 2019 at 7:41
Add a comment
|
3 Answers
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>
answered May 5, 2020 at 12:27
Yashwardhan Pauranik
5,5865 gold badges45 silver badges77 bronze badges
2 Comments
Tadas Majeris
how about Nuxt 3?
Daniel Danielecki
copy/pasted from github.com/nuxt/nuxt/issues/14195, at least leave the source
Nuxt3
A long-awaited solution as a result of https://github.com/nuxt/nuxt/issues/14195 discussion.
Create a file in server/plugins/extend-html.ts (yes, server/plugins folder, not just plugins in root)
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
html.head.push(
`<script async src='https://www.googletagmanager.com/gtag/js?id=AW-123456789'></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'AW-123456789');</script>`,
)
})
})
as per https://nuxt.com/docs/guide/directory-structure/server#server-plugins it'll automatically import to your file while doing nuxi build. It's in server, so can't promise it'll work for nuxi generate.
Comments
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/
1 Comment
Kalnode
There is an
index.html generated by Nuxt based on what configuration you have.