tsparticles · matteobruni · Dec 22, 2023 · Aug 20, 2023 · Aug 20, 2023 · Aug 20, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/tsparticles/vue3/compare/v2.12.0...v3.0.0) (2023-12-22)
+
+
+### Bug Fixes
+
+* **deps:** update dependency eslint-config-prettier to v9 ([c6ba232](https://github.com/tsparticles/vue3/commit/c6ba232b328f3340b001f5b250c369030c91f66b))
+* **deps:** update dependency lint-staged to v14 ([30c622d](https://github.com/tsparticles/vue3/commit/30c622d37c46ae5047950b88111e861e2cf8746a))
+* **example:** clean up Nuxt example & fix type-checking ([4a93b5d](https://github.com/tsparticles/vue3/commit/4a93b5d1346ee7e88d625afbc5aa785340dd371c))
+* **example:** clean up Vite example and remove dead code ([7064feb](https://github.com/tsparticles/vue3/commit/7064feb638a503a0bb158c49d0a76d16142bede2))
+* **example:** disable SSR for Nuxt plugin ([55980f1](https://github.com/tsparticles/vue3/commit/55980f12947b43712070e6d36d1a51425e8cf23d))
+* **example:** remove console#log ([e537e3a](https://github.com/tsparticles/vue3/commit/e537e3ae2fb2fbc101f6ef18f2f5dec518407f34))
+* **example:** remove console#log ([a89474a](https://github.com/tsparticles/vue3/commit/a89474a7c67ba8e6429c38499b7f4b8621280a87))
+* **example:** remove toRaw ([f74d07d](https://github.com/tsparticles/vue3/commit/f74d07d4919b1a17be96cd54fd343a460c86cf4d))
+* **example:** use proper types ([17ff54e](https://github.com/tsparticles/vue3/commit/17ff54ecb331ac260892fb5a559dd1d34ef3fc92))
+* **example:** use type declaration ([eee2cc8](https://github.com/tsparticles/vue3/commit/eee2cc8782a275f0bf771a6ed7b2b3be5bf87e85))
+* use event syntax for particlesLoaded ([5b4de3a](https://github.com/tsparticles/vue3/commit/5b4de3a411ede58c00517cf72fbab5bd5acfb882))
+
+
+### Features
+
+* updated for v3 ([c49ca9f](https://github.com/tsparticles/vue3/commit/c49ca9f1aec1f7ddaa0de7806291a5c4c78eb848))
+* updates for v3 ([c62d3d3](https://github.com/tsparticles/vue3/commit/c62d3d30dfcc5307490fb15f2ed132b36036f252))
+
+
+
+
+
 # [2.12.0](https://github.com/tsparticles/vue3/compare/v2.11.1...v2.12.0) (2023-08-04)
 
 **Note:** Version bump only for package vue3-particles-workspace

diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 
-# vue3-particles
+# @tsparticles/vue3
 
-[![npm](https://img.shields.io/npm/v/vue3-particles)](https://www.npmjs.com/package/vue3-particles) [![npm](https://img.shields.io/npm/dm/vue3-particles)](https://www.npmjs.com/package/vue3-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![npm](https://img.shields.io/npm/v/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![npm](https://img.shields.io/npm/dm/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x component
 
@@ -13,32 +13,33 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x com
 ## Installation
 
 ```shell script
-yarn add vue3-particles
+yarn add @tsparticles/vue3
 ```
 
 ## Usage
 
 ```javascript
-import Particles from "vue3-particles";
+import Particles from "@tsparticles/vue3";
+//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
+import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
 
-createApp(App).use(Particles);
+createApp(App).use(Particles, {
+  init: async engine => {
+    // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
+    await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
+  },
+});
 ```
 
 ### Demo config
 
 ```html
 <template>
     <div id="app">
-        <vue-particles
-            id="tsparticles"
-            :particlesInit="particlesInit"
-            :particlesLoaded="particlesLoaded"
-            url="http://foo.bar/particles.json"
-        />
+        <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
 
         <vue-particles
             id="tsparticles"
-            :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"
             :options="{
                     background: {
@@ -57,7 +58,6 @@ createApp(App).use(Particles);
                                 enable: true,
                                 mode: 'repulse'
                             },
-                            resize: true
                         },
                         modes: {
                             bubble: {
@@ -89,15 +89,14 @@ createApp(App).use(Particles);
                         move: {
                             direction: 'none',
                             enable: true,
-                            outMode: 'bounce',
+                            outModes: 'bounce',
                             random: false,
                             speed: 6,
                             straight: false
                         },
                         number: {
                             density: {
                                 enable: true,
-                                area: 800
                             },
                             value: 80
                         },
@@ -108,8 +107,7 @@ createApp(App).use(Particles);
                             type: 'circle'
                         },
                         size: {
-                            random: true,
-                            value: 5
+                            value: { min: 1, max: 5 }
                         }
                     },
                     detectRetina: true
@@ -120,14 +118,6 @@ createApp(App).use(Particles);
 ```
 
 ```javascript
-//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
-import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
-
-const particlesInit = async engine => {
-    //await loadFull(engine);
-    await loadSlim(engine);
-};
-
 const particlesLoaded = async container => {
     console.log("Particles container loaded", container);
 };
@@ -139,7 +129,7 @@ If TypeScript returns error while importing/using Particles plugin try adding th
 code:
 
 ```typescript
-declare module "vue3-particles";
+declare module "@tsparticles/vue3";
 ```
 
 ## Demos
@@ -156,8 +146,9 @@ There's also a CodePen collection actively maintained and updated [here](https:/
 
 If you are migrating your project from Vue 2.x to 3.x you need to these steps:
 
--   Change the dependency from `vue2-particles` to `vue3-particles`
+-   Change the dependency from `@tsparticles/vue2` to `@tsparticles/vue3`
 -   Update the `node_modules` folder executing `npm install` or `yarn`
--   Change the `use` function from `Vue.use(Particles)` to `createApp(App).use(Particles)`.
+-   Change the `use` function from `Vue.use(Particles, { init: /* omissis */ })`
+    to `createApp(App).use(Particles, { init: /* omissis */ })`.
 
-The `<Particles />` tag syntax remains the same, so you don't need to do any additional action.
+The `<vue-particles />` tag syntax remains the same, so you don't need to do any additional action.
diff --git a/apps/nuxt3/.npmrc b/apps/nuxt3/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/apps/nuxt3/CHANGELOG.md b/apps/nuxt3/CHANGELOG.md
@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/tsparticles/vue3/compare/v2.12.0...v3.0.0) (2023-12-22)
+
+
+### Bug Fixes
+
+* **deps:** update dependency eslint-config-prettier to v9 ([c6ba232](https://github.com/tsparticles/vue3/commit/c6ba232b328f3340b001f5b250c369030c91f66b))
+* **deps:** update dependency lint-staged to v14 ([30c622d](https://github.com/tsparticles/vue3/commit/30c622d37c46ae5047950b88111e861e2cf8746a))
+* **example:** clean up Nuxt example & fix type-checking ([4a93b5d](https://github.com/tsparticles/vue3/commit/4a93b5d1346ee7e88d625afbc5aa785340dd371c))
+* **example:** disable SSR for Nuxt plugin ([55980f1](https://github.com/tsparticles/vue3/commit/55980f12947b43712070e6d36d1a51425e8cf23d))
+* **example:** remove console#log ([a89474a](https://github.com/tsparticles/vue3/commit/a89474a7c67ba8e6429c38499b7f4b8621280a87))
+* **example:** remove toRaw ([f74d07d](https://github.com/tsparticles/vue3/commit/f74d07d4919b1a17be96cd54fd343a460c86cf4d))
+* **example:** use proper types ([17ff54e](https://github.com/tsparticles/vue3/commit/17ff54ecb331ac260892fb5a559dd1d34ef3fc92))
+* **example:** use type declaration ([eee2cc8](https://github.com/tsparticles/vue3/commit/eee2cc8782a275f0bf771a6ed7b2b3be5bf87e85))
+
+
+### Features
+
+* updated for v3 ([c49ca9f](https://github.com/tsparticles/vue3/commit/c49ca9f1aec1f7ddaa0de7806291a5c4c78eb848))
+
+
+
+
+
 # [2.12.0](https://github.com/tsparticles/vue3/compare/v2.11.1...v2.12.0) (2023-08-04)
 
 **Note:** Version bump only for package nuxt3-particles-demo

diff --git a/apps/nuxt3/app.vue b/apps/nuxt3/app.vue
@@ -1,55 +1,42 @@
 <template>
-    <div>
-        <NuxtWelcome />
-        <vue-particles
-            id="tsparticles"
-            :options="options"
-            :particles-init="particlesInit"
-        />
-    </div>
+  <div>
+    <!--<NuxtWelcome/>-->
+    <client-only>
+      <vue-particles
+          id="tsparticles"
+          :options="options"
+          @particles-loaded="particlesLoaded"
+      />
+    </client-only>
+  </div>
 </template>
-<script>
-import { loadFull } from "tsparticles";
+<script setup lang="ts">
+import type { ISourceOptions, Container } from "@tsparticles/engine";
 
-export default {
-    name: "NuxtTutorial",
-    data() {
-        return {
-            options: {
-                background: {
-                    color: "#fff"
-                },
-                fullScreen: {
-                    enable: true,
-                    zIndex: -1
-                },
-                particles: {
-                    color: {
-                        value: "#000"
-                    },
-                    links: {
-                        color: "#000",
-                        enable: true
-                    },
-                    move: {
-                        enable: true
-                    },
-                    number: {
-                        value: 100
-                    }
-                }
-            }
-        };
+const options: ISourceOptions = {
+  background: {
+    color: "#000"
+  },
+  particles: {
+    links: {
+      enable: true
     },
-    methods: {
-        particlesInit: async (engine) => {
-            await loadFull(engine);
-        }
+    move: {
+      enable: true
+    },
+    number: {
+      value: 100
     }
-};
+  }
+}
+
+const particlesLoaded = (container?: Container) => {
+  console.log(container)
+}
+
 </script>
 <style>
 .bg-white {
-    background: none !important;
+  background: none !important;
 }
 </style>
diff --git a/apps/nuxt3/nuxt.config.ts b/apps/nuxt3/nuxt.config.ts
@@ -1,11 +1,4 @@
 import { defineNuxtConfig } from 'nuxt/config'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
-export default defineNuxtConfig({
-  plugins: [
-    {
-      src: '~/plugins/vue3-particles.ts',
-      mode: 'client',
-    },
-  ],
-})
+export default defineNuxtConfig({})
diff --git a/apps/nuxt3/package.json b/apps/nuxt3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt3-particles-demo",
-  "version": "2.12.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -17,27 +17,28 @@
     "*.**": "prettier --check --ignore-unknown"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/eslint-parser": "^7.22.9",
+    "@babel/core": "^7.23.6",
+    "@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",
+    "@tsparticles/engine": "^3.0.2",
+    "@tsparticles/vue3": "workspace:^",
+    "@vue/reactivity": "^3.3.13",
+    "@vue/runtime-core": "^3.3.13",
+    "@vue/runtime-dom": "^3.3.13",
+    "@vue/shared": "^3.3.13",
     "consola": "^3.2.3",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.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",
-    "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",
+    "typescript": "^5.3.3",
+    "vue": "^3.3.13",
+    "webpack": "^5.89.0"
   }
 }
diff --git a/apps/nuxt3/plugins/vue3-particles.client.ts b/apps/nuxt3/plugins/vue3-particles.client.ts
@@ -0,0 +1,12 @@
+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, {
+        init: async (engine) => {
+            await loadFull(engine);
+        }
+    })
+})
diff --git a/apps/nuxt3/plugins/vue3-particles.ts b/apps/nuxt3/plugins/vue3-particles.ts
diff --git a/apps/nuxt3/shim-vue3-particles.d.ts b/apps/nuxt3/shim-vue3-particles.d.ts
diff --git a/apps/vue3/CHANGELOG.md b/apps/vue3/CHANGELOG.md
@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0](https://github.com/tsparticles/vue3/compare/v2.12.0...v3.0.0) (2023-12-22)
+
+
+### Bug Fixes
+
+* **example:** clean up Vite example and remove dead code ([7064feb](https://github.com/tsparticles/vue3/commit/7064feb638a503a0bb158c49d0a76d16142bede2))
+* **example:** remove console#log ([e537e3a](https://github.com/tsparticles/vue3/commit/e537e3ae2fb2fbc101f6ef18f2f5dec518407f34))
+
+
+### Features
+
+* updated for v3 ([c49ca9f](https://github.com/tsparticles/vue3/commit/c49ca9f1aec1f7ddaa0de7806291a5c4c78eb848))
+
+
+
+
+
 # [2.12.0](https://github.com/tsparticles/vue3/compare/v2.11.1...v2.12.0) (2023-08-04)
 
 **Note:** Version bump only for package vue3-demo