Nuxt - override default document with custom app.html

Question

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?

kissu · Accepted Answer · 2021-06-04 13:13:42Z

1

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.

answered Jun 4, 2021 at 13:13

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mitya Over a year ago

Interestingly, I found I had to restart Nuxt via npm run dev. I found this by accident after a config parse error forced the server to stop and had to be restarted. It now loads my custom doc.

Collectives™ on Stack Overflow

Nuxt - override default document with custom app.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related