Search code examples
vue.jsnuxt.jsyarnpkg

NuxtJS possible to generate JUST plain HTML?

I'm really curious if I use NuxtJS right.. I just want to generate HTML pages, so basically I dont need ANY JavaScript! But Everytime I do generate any page with Nuxt There is a lot of JS in there.

Now I managed to remove ClientSide Scripts with:

 render: {
   injectScripts: false
 },

in the nuxt.config.js .. but now anyway there is a inlineJS script with:

window.__NUXT__={staticAssetsBase:"/_nuxt/static/1614565042",serverRendered:!0,routePath:'"/"'}

or even

<script>window.__NUXT__={staticAssetsBase:"/_nuxt/static/1614566041"}</script>
<script src="/_nuxt/3dacfb6.js" defer></script>
<script src="/_nuxt/47380cc.js" defer></script>
<script src="/_nuxt/fbdf180.js" defer></script>
<script src="/_nuxt/77b577f.js" defer></script>
<script src="/_nuxt/04f2e32.js" defer></script>

in the generated HTML.. I dont understand why there is not a simple mode to just generate very simple HTML pages without ANY overhead. Its just about re-using components for me and using some very simple variables.. No JS have to be used at all and CSS I'm generating & combining with YARN, so no need for anything else..

Also i dont like the data-* tags .. I really dont need them. I want to create simple HTML pages with no function on clientside, but still having the function of "components" which is injected (serverside) and re-use in multiple pages.

I run Nuxt with this config:

  target: 'static',
  render: {
    injectScripts: false
  },
  hooks: {
    'vue-renderer:ssr:context'(context) {
      const routePath = '';
      context.nuxt = '';
    },
  },

to remove as much JS and standard stuff as possible... but seems it still not possible to remove Everything and just generate a plain HTML without anything extra.

So the question is:

How can I generate static pages with NuxtJS and not having to include ANY JS file.. specially not the standard NUXT-JavaScript code?

If you think I better should not use NuxtJS for simple clean HTMl pages tell me :)

Solution

  • Nuxt is not meant to be used as SSR only, it does have the whole hydration part that will bring interactivity to your app even when going full static. You could probably use another SSG like 11ty or hugo to not have any JS loaded.

    But you can also use vue-lazy-hydration and prevent the hydration at the top level of your app. It's still kinda in beta but it should do the trick.