Nuxt v4 Compatibility

[ljuzig]

Now that Nuxt v4 is out, nuxt-particles is disabled at runtime because its compatibility excludes v4:

WARN  Module nuxt-particles is disabled due to incompatibility issues:
- [nuxt] Nuxt version ^3.7.0 is required but currently using 4.0.0

What happens

• Commit [7ab3d1a](https://github.com/Joepocalyptic/nuxt-particles/commit/7ab3d1a391774d107c38d2d21cd4dc96218c7ae5) intended to require “Nuxt ≥ 3.7.0”, but actually sets “nuxt:^3.7.0”
• The caret (^) range stops at <4.0.0, so Nuxt 4 users are locked out even though the module works fine.

Prior work

A ready‑to‑merge fix already exists: PR [#25](#25)

- "nuxt": "^3.7.0"
+ "nuxt": ">=3.7.0"

I’ve tested that branch locally with Nuxt 4.0.0 and everything runs as expected.

Could you please review and merge PR #25 (or an equivalent change) and publish a patch release to npm?
Thanks a lot for maintaining nuxt-particles!

[TaurusBill]

Same issue here, any solution?

[LaurenceJJones]

Just hit this whilst upgrading from v3 to v4, any way to workaround till the maintainer merges and publishes?

[ljuzig]

A very temporary solution for testing in development is to manually edit the file located at /node_modules/nuxt-particles/dist/modules.mjs and change nuxt: "^3.7.0" to nuxt: ">=3.7.0"
This is not ideal and is not recommended for use in production, but it's a working solution in the meantime waiting for the maintainer to update the module.

[jesspinklet]

@Joepocalyptic 🥲

[duncandejong]

@Joepocalyptic 🥲

[dodanex]

@Joepocalyptic , @danielroe can you guys help by making this module work on nuxt v4? thanks alot!

[ljuzig]

@Joepocalyptic , @danielroe can you guys help by making this module work on nuxt v4? thanks alot!

This module already works on Nuxt v4 and there is already a pull request to fix the requirement issue. Since the maintainer is gone missing I suggest you to create a fix module like this in the meantime:

fix.mjs

import { readFileSync, writeFileSync } from 'node:fs';

function replaceInFile(path, search, replace) {
  const s = readFileSync(path, 'utf8');
  if(!s.includes(search)) {
    console.warn(`[patch] ${path} already patched`);
    return false;
  }
  writeFileSync(path, s.replace(search, replace), 'utf8');
  console.log(`[patch] ${path} patched`);
  return true;
}

replaceInFile(
  'node_modules/nuxt-particles/dist/module.mjs',
  'nuxt: "^3.7.0"',
  'nuxt: ">=3.7.0"'
);

and add it to your package.json:

  "scripts": {
    "postinstall": "node scripts/fix.mjs && nuxt prepare"
  },

This will automatically fix the module on every install and pretty much work out of the box. Don't forget to npm i after this.

[chojnicki]

There is official module now @tsparticles/nuxt4 which is a wrapper for vue component. Both packages do not do much to be honest. It is simple task to write similar nuxt module from scratch instead relying on another dependency.