feat: updated for v3

Author: matteobruni

apps/nuxt3/app.vue

@@ -1,32 +1,24 @@
 <template>
   <div>
-    <NuxtWelcome />
-    <vue-particles
-      id="tsparticles"
-      :options="options"
-      :particles-init="particlesInit"
-      @particles-loaded="particlesLoaded"
-    />
+    <!--<NuxtWelcome/>-->
+    <client-only>
+      <vue-particles
+          id="tsparticles"
+          :options="options"
+          @particles-loaded="particlesLoaded"
+      />
+    </client-only>
   </div>
 </template>
 <script setup lang="ts">
-import { loadFull } from "tsparticles";
-import type { ISourceOptions, Container } from "tsparticles-engine";
+import type { ISourceOptions, Container } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
   background: {
-    color: "#fff"
-  },
-  fullScreen: {
-    enable: true,
-    zIndex: -1
+    color: "#000"
   },
   particles: {
-    color: {
-      value: "#000"
-    },
     links: {
-      color: "#000",
       enable: true
     },
     move: {
@@ -38,11 +30,7 @@ const options: ISourceOptions = {
   }
 }
 
-const particlesInit = async (engine) => {
-  await loadFull(engine)
-}
-
-const particlesLoaded = (container: Container) => {
+const particlesLoaded = (container?: Container) => {
   console.log(container)
 }
 

apps/nuxt3/package.json

@@ -17,28 +17,28 @@
     "*.**": "prettier --check --ignore-unknown"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/eslint-parser": "^7.22.9",
+    "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.23.3",
     "@nuxt/ui-templates": "^1.3.1",
     "@nuxtjs/eslint-config": "^12.0.0",
     "@nuxtjs/eslint-module": "^4.1.0",
-    "@vue/reactivity": "^3.3.4",
-    "@vue/runtime-core": "^3.3.4",
-    "@vue/runtime-dom": "^3.3.4",
-    "@vue/shared": "^3.3.4",
+    "@vue/reactivity": "^3.3.11",
+    "@vue/runtime-core": "^3.3.11",
+    "@vue/runtime-dom": "^3.3.11",
+    "@vue/shared": "^3.3.11",
     "consola": "^3.2.3",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-vue": "^9.16.1",
-    "lint-staged": "^14.0.0",
-    "nuxt": "^3.6.5",
-    "prettier": "^3.0.1",
-    "tsparticles": "^2.12.0",
-    "tsparticles-engine": "^2.12.0",
-    "typescript": "^5.1.6",
-    "vue": "^3.3.4",
-    "vue3-particles": "workspace:^",
-    "webpack": "^5.88.2"
+    "eslint-plugin-vue": "^9.19.2",
+    "lint-staged": "^15.2.0",
+    "nuxt": "^3.8.2",
+    "prettier": "^3.1.1",
+    "tsparticles": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
+    "typescript": "^5.3.3",
+    "vue": "^3.3.11",
+    "@tsparticles/vue3": "workspace:^",
+    "webpack": "^5.89.0"
   }
 }

apps/nuxt3/plugins/vue3-particles.client.ts

@@ -1,6 +1,12 @@
-import Particles from 'vue3-particles'
+import Particles from '@tsparticles/vue3'
+import { loadFull } from "tsparticles";
+import { defineNuxtPlugin } from "#app";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  // Doing something with nuxtApp
-  nuxtApp.vueApp.use(Particles)
+    // Doing something with nuxtApp
+    nuxtApp.vueApp.use(Particles, {
+        init: async (engine) => {
+            await loadFull(engine);
+        }
+    })
 })

apps/vue3/package.json

@@ -12,29 +12,29 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "tsparticles": "^2.12.0",
-    "tsparticles-demo-configs": "^2.12.0",
-    "tsparticles-engine": "^2.12.0",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
-    "vue3-particles": "workspace:^"
+    "tsparticles": "^3.0.2",
+    "@tsparticles/configs": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5",
+    "@tsparticles/vue3": "workspace:^"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@tsconfig/node18": "^18.2.0",
-    "@types/node": "^20.4.7",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@rushstack/eslint-patch": "^1.6.0",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^20.10.4",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.46.0",
-    "eslint-plugin-vue": "^9.16.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-vue": "^9.19.2",
     "minimatch": "^9.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vue-tsc": "^1.8.8"
+    "prettier": "^3.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.7",
+    "vue-tsc": "^1.8.25"
   }
 }

apps/vue3/src/App.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import type { Container, Engine } from "tsparticles-engine";
-import { loadFull } from "tsparticles";
-import configs from "tsparticles-demo-configs";
+import type { Container } from "@tsparticles/engine";
+import configs from "@tsparticles/configs";
 
 const options = configs.basic;
 
-const particlesInit = async (engine: Engine) => {
-  await loadFull(engine);
-};
-
 const particlesLoaded = async (container: Container) => {
   console.log(container);
 };
@@ -19,7 +14,6 @@ const particlesLoaded = async (container: Container) => {
     <vue-particles
       id="tsparticles"
       :options="options"
-      :particles-init="particlesInit"
       @particles-loaded="particlesLoaded"
     />
   </main>

apps/vue3/src/main.ts

@@ -1,11 +1,17 @@
 import { createApp } from "vue";
-import Particles from "vue3-particles";
+import Particles from "@tsparticles/vue3";
 import App from "./App.vue";
 
 import "./assets/main.css";
+import { loadFull } from "tsparticles";
+import type { Engine } from "@tsparticles/engine";
 
 const app = createApp(App);
 
-app.use(Particles);
+app.use(Particles, {
+    init: async (engine: Engine) => {
+        await loadFull(engine);
+    }
+});
 
 app.mount("#app");