nuxt-lazy-inject-scripts

This is a Nuxt 2 module that allows you to specify when to inject scripts, similar to Astro's partial hydration component tags. Nuxt 2 already offers the injectScripts option that lets you turn off scripts completely.

The function needs to take a callback, which when executed will cause the app scripts to load.

Inspired by Islands Mode in fastify-vite.

Install

npm i nuxt-lazy-inject-scripts

Usage

In nuxt.config.js:

function after3Seconds (callback) {
  setTimeout(callback, 3000)
}

export default {
  injectScriptsWhen: after3Seconds,
}

The function passed to injectScriptsWhen needs to be a named one — an arrow function or an anonymous one won't work because the module relies on Function.toString() and Function.name to inject the lazy loader script into HTML files generated by Nuxt.js

Sponsor

License

MIT