feat: Use tsparticles v3

Author: Joepocalyptic

docs/content/1.getting-started/2.configuration.md

@@ -29,9 +29,9 @@ this option unless the [Total Blocking Time](https://web.dev/tbt/) web vital is
 
 The `mode` option allows you to choose which bundle of the tsParticles library to use. The default value is `full`.
 `slim` uses the
-[`tsparticles-slim`](https://www.npmjs.com/package/tsparticles-slim)
+[`@tsparticles/slim`](https://www.npmjs.com/package/@tsparticles/slim)
 package, while `basic` uses the
-[`tsparticles-basic`](https://www.npmjs.com/package/tsparticles-basic) 
+[`@tsparticles/basic`](https://www.npmjs.com/package/@tsparticles/basic) 
 package. See their respective documentation for more information.
 
 If you are not using certain advanced features of the tsParticles library, you may want to try out the `slim` or `basic`
@@ -67,7 +67,7 @@ component is rendered, you must manually initialize the tsParticles library (suc
 </template>
 
 <script setup lang="ts">
-import { tsParticles } from 'tsparticles-engine'
+import { tsParticles } from '@tsparticles/engine'
 import { loadFull } from 'tsparticles' // or whichever bundle you wish to use
 
 if (process.client) {
@@ -84,9 +84,9 @@ If bundle sizes are of the utmost importance, this is likely the best option for
 ```vue
 <!-- ... -->
 <script setup lang="ts">
-import { tsParticles } from 'tsparticles-engine'
-import { loadStarShape } from 'tsparticles-shape-star'
-import { loadPolygonPath } from 'tsparticles-path-polygon'
+import { tsParticles } from '@tsparticles/engine'
+import { loadStarShape } from '@tsparticles/shape-star'
+import { loadPolygonPath } from '@tsparticles/path-polygon'
 
 await loadStarShape(tsParticles)
 await loadPolygonPath(tsParticles)

docs/content/1.getting-started/3.faq.md

@@ -2,16 +2,16 @@
 
 These are some frequently asked questions about the `nuxt-particles` module.
 
-## Why not use `vue3-particles`?
+## Why not use `@tsparticles/vue3`?
 
-The `vue3-particles` package (alias `particles.vue3`) is the first-party Vue 3 wrapper around the `tsParticles` library, but
+The `@tsparticles/vue3` package is the first-party Vue 3 wrapper around the `tsParticles` library, but
 it has some flaws.
 
 The `tsParticles` library modifies the global scope upon initialization; it is not done on a per-component basis. Therefore,
 loading the provided component multiple times will cause a "flash" on all existing particle containers without complicated
 workarounds. This is an antipattern to Vue's isolated, component-based paradigm, and is therefore not ideal.
 
-The component provided by this module solves this by keeping track of whether or not the library is initialized on a
+The component provided by this module solves this by keeping track of whether the library is initialized on a
 global level. If it has already been initialized, any subsequent component instances will not attempt to reload it.
 This is made possible using Nuxt's built-in `useState` composable.
 

package.json

@@ -41,23 +41,23 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@nuxt/kit": "^3.7.4",
-    "defu": "^6.1.2",
-    "tsparticles": "^2.12.0",
-    "tsparticles-basic": "^2.12.0",
-    "tsparticles-engine": "^2.12.0",
-    "tsparticles-slim": "^2.12.0"
+    "@nuxt/kit": "^3.11.1",
+    "defu": "^6.1.4",
+    "tsparticles": "^3.3.0",
+    "@tsparticles/basic": "^3.3.0",
+    "@tsparticles/engine": "^3.3.0",
+    "@tsparticles/slim": "^3.3.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.2",
-    "@nuxt/schema": "^3.7.4",
-    "@nuxt/test-utils": "^3.7.4",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.11.1",
+    "@nuxt/test-utils": "^3.12.0",
     "@types/node": "^18.18.4",
     "changelogen": "^0.5.5",
-    "eslint": "^8.51.0",
-    "nuxt": "^3.7.4",
+    "eslint": "^8.57.0",
+    "nuxt": "^3.11.1",
     "vitest": "^0.34.6"
   }
-}
+}

playground/app.vue

@@ -19,8 +19,8 @@
 
 <script setup lang="ts">
 import { ref, useRuntimeConfig } from '#imports'
-import {loadFull} from 'tsparticles'
-import {tsParticles} from 'tsparticles-engine'
+import { loadFull } from 'tsparticles'
+import { tsParticles } from '@tsparticles/engine'
 
 const { mode } = useRuntimeConfig().public.particles
 

playground/package.json

@@ -1,13 +1,13 @@
 {
   "private": true,
-  "name": "my-module-playground",
+  "name": "nuxt-particles-playground",
   "type": "module",
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
     "generate": "nuxi generate"
   },
   "devDependencies": {
-    "nuxt": "latest"
+    "nuxt": "^3.11.1"
   }
 }