CODEWITHSUNDEEP
vue.jsnuxt.js
Leo
Leo

Reputation: 385

Custom index.html for nuxt.js build

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?

Upvotes: 22

Views: 25356

Answers (3)

Daniel Danielecki
Daniel Danielecki

Reputation: 10512

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.

Upvotes: 6

Pierre Said
Pierre Said

Reputation: 3820

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/

Upvotes: 1

Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5556

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>

Upvotes: 28

Related Questions