allow disabling client-side JS entirely

[danielroe]

For some use cases, users may wish to have a purely HTML + CSS website where interactivity is not required. Shipping JS to hydrate such a site is unneeded.

For these use cases, we could consider support a top level option (or a per-path route rule) to disable rendering JS preload hints + script tags within the renderer.

Some initial steps:

• create module: nuxt-zero-js

Note: We may also need to update https://github.com/nuxtlabs/vue-telescope-api to accurately detect Nuxt on such sites. At the moment, it is unaware that https://nuxt.new/ is built with Nuxt 😆

[pi0]

Pure HTML is not a normal output mode. We were considering it with @atinux since Nuxt 2 but finally decided to not introduce but i really love this idea specially combined with reactive component islands. We can probably have a module to try this mode ahead of time. Later can be joined with route rules to set per page (or group of pages) bases.

Also good point about detection! What about a magical <-- nuxt --> comment replacing strings. (There is also X-Powered-By header but not working for static builds)

[516310460]

This is great, just like building islands, non-interactive and interactive loading of js scripts.

This will improve very high performance and resource size.

[harlan-zw]

It'd be great to see it in the core with some sort of support for island hydration

[516310460]

It'd be great to see it in the core with some sort of support for island hydration

Yes, this is the beginning of a revolution

[HelloAlexPan]

This would be the key feature for us not to switch to Astro

[miclgael]

I have written post-build hacks to do this in nuxt 2 and it is a real pain point. Kudos @danielroe

[516310460]

Support nuxt2?

[danielroe]

You can do this in Nuxt 2 by setting render.injectScripts to false.

[kstraszewski]

The feature looks great, it would be amazing to use it per route!

[ManasMadrecha]

Having absolutely no JS is not useful; we need some JS in header or in button to toggle dark mode.

It would be better to have this feature per component, like in Astro. By default, global setting will render no JS, but with JS option set in particular component, Nuxt could enable JS for only those components.

[prof2k]

I found a use for "No JS" on the client site when trying to take a static SSG site offline and reroute all pages to a maintenance page by rerouting on the server itself. I tried using Netlify's _redirect folder, and while it worked, the nuxt app will hydrate and automatically try routing to the initial route (which reversed the configured server behavior).

Since the deployment is truly static, this should work, but there's no way to fix it other than create a middleware/hook that hijacks and reroutes all existing routes to the desired page because Nuxt's default client-side behavior always kicks in. This causes at least two extra redirects, and crawlers don't get the intended redirect status code configured on the server. The problem has more to do with Nuxt's routing behavior, but that's expected and cannot/shouldn't be overridden. There should be a way to disable hydration on the first load or per route for SSG sites.

[prof2k]

Just seeing that this has already been implemented. You'll need to add this to your nuxt config file to get it working.

features: {
noScripts: true,
},