Using the basic SPA example from the nuxt.js repository
If I run npm run build I get correctly rendered files in the dist/index.html file
<!DOCTYPE html>
<html data-n-head="">
<head>
<meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="Single Page Application made with Nuxt.js"/><title data-n-head="true">SPA mode with Nuxt.js</title><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/manifest.d0744574585ac1dee85d.js" as="script" /><link rel="preload" href="/_nuxt/vendor.e5846097588ab215ec84.js" as="script" /><link rel="preload" href="/_nuxt/app.ea8601e0953e1b274d4d.js" as="script" /><link rel="prefetch" href="/_nuxt/pages/about.4118266901f28cbb833c.js" /><link rel="prefetch" href="/_nuxt/pages/index.ec5c074253357cf54927.js" /><link rel="prefetch" href="/_nuxt/layouts/default.860485f7694926d31a51.js" />
</head>
<body data-n-head="">
<div id="__nuxt"><style>body, html, #__nuxt { background-color: white; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0;}.spinner { width: 40px; height: 40px; margin: 100px auto; background-color: #dbe1ec; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out;}@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; }}@keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; }}</style><div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div></div><!-- http://tobiasahlin.com/spinkit --></div>
<script type="text/javascript" src="/_nuxt/manifest.d0744574585ac1dee85d.js"></script><script type="text/javascript" src="/_nuxt/vendor.e5846097588ab215ec84.js"></script><script type="text/javascript" src="/_nuxt/app.ea8601e0953e1b274d4d.js"></script></body>
</html>If I edit nuxt.config.js to include a different build directory (because I want the files to be included in the static directory of my server) and add:
buildDir: '../app/static/spa'I get an incorrectly rendered index.spa.html file:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
<script type="text/javascript" src="/_nuxt/manifest.b952793a76434c73795b.js"></script><script type="text/javascript" src="/_nuxt/vendor.e5846097588ab215ec84.js"></script><script type="text/javascript" src="/_nuxt/app.4305fc29686149ef8b58.js"></script></body>
</html>I have also documented the whole process in a minimal working example repo.
As of now my only solution it to use a bash script to manually copy the generated files in their proper location (right after npm run build and without using buildDir).
So either, I'm not configuring the nuxt.config.js right, or it is indeed a bug. Any ideas?