Merge pull request #31 from Joepocalyptic/main

fix: use event syntax for particlesLoaded

Author: matteobruni

apps/nuxt3/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

apps/nuxt3/app.vue

@@ -1,55 +1,54 @@
 <template>
-    <div>
-        <NuxtWelcome />
-        <vue-particles
-            id="tsparticles"
-            :options="options"
-            :particles-init="particlesInit"
-        />
-    </div>
+  <div>
+    <NuxtWelcome />
+    <vue-particles
+      id="tsparticles"
+      :options="options"
+      :particles-init="particlesInit"
+      @particles-loaded="particlesLoaded"
+    />
+  </div>
 </template>
-<script>
+<script setup lang="ts">
 import { loadFull } from "tsparticles";
+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: "#fff"
+  },
+  fullScreen: {
+    enable: true,
+    zIndex: -1
+  },
+  particles: {
+    color: {
+      value: "#000"
     },
-    methods: {
-        particlesInit: async (engine) => {
-            await loadFull(engine);
-        }
+    links: {
+      color: "#000",
+      enable: true
+    },
+    move: {
+      enable: true
+    },
+    number: {
+      value: 100
     }
-};
+  }
+}
+
+const particlesInit = async (engine) => {
+  await loadFull(engine)
+}
+
+const particlesLoaded = (container: Container) => {
+  console.log(container)
+}
+
 </script>
 <style>
 .bg-white {
-    background: none !important;
+  background: none !important;
 }
 </style>

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({})

apps/nuxt3/package.json

@@ -35,6 +35,7 @@
     "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:^",

apps/nuxt3/plugins/vue3-particles.ts …s/nuxt3/plugins/vue3-particles.client.tsapps/nuxt3/plugins/vue3-particles.ts renamed to apps/nuxt3/plugins/vue3-particles.client.ts apps/nuxt3/plugins/vue3-particles.ts renamed to apps/nuxt3/plugins/vue3-particles.client.ts

@@ -3,104 +3,87 @@ import type { Container, Engine } from "tsparticles-engine";
 import { loadFull } from "tsparticles";
 import configs from "tsparticles-demo-configs";
 
-import HelloWorld from "./components/HelloWorld.vue";
-import TheWelcome from "./components/TheWelcome.vue";
-
 const options = configs.basic;
 
 const particlesInit = async (engine: Engine) => {
-    await loadFull(engine);
-
-    console.log(engine);
+  await loadFull(engine);
 };
 
 const particlesLoaded = async (container: Container) => {
-    console.log(container);
+  console.log(container);
 };
 </script>
 
 <template>
-    <header>
-        <img
-            alt="Vue logo"
-            class="logo"
-            src="./assets/logo.svg"
-            width="125"
-            height="125"
-        />
-
-        <div class="wrapper">
-            <HelloWorld msg="You did it!" />
-        </div>
-    </header>
-
-    <main>
-        <TheWelcome />
-
-        <vue-particles id="tsparticles" :options="options" :particlesInit="particlesInit"
-                       :particlesLoaded="particlesLoaded" />
-    </main>
+  <main>
+    <vue-particles
+      id="tsparticles"
+      :options="options"
+      :particles-init="particlesInit"
+      @particles-loaded="particlesLoaded"
+    />
+  </main>
 </template>
 
 <style>
 @import "./assets/base.css";
 
 #app {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
 
-    font-weight: normal;
+  font-weight: normal;
 }
 
 header {
-    line-height: 1.5;
+  line-height: 1.5;
 }
 
 .logo {
-    display: block;
-    margin: 0 auto 2rem;
+  display: block;
+  margin: 0 auto 2rem;
 }
 
 a,
 .green {
-    text-decoration: none;
-    color: hsla(160, 100%, 37%, 1);
-    transition: 0.4s;
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
 }
 
 @media (hover: hover) {
-    a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
-    }
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
 }
 
 @media (min-width: 1024px) {
-    body {
-        display: flex;
-        place-items: center;
-    }
-
-    #app {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        padding: 0 2rem;
-    }
-
-    header {
-        display: flex;
-        place-items: center;
-        padding-right: calc(var(--section-gap) / 2);
-    }
-
-    header .wrapper {
-        display: flex;
-        place-items: flex-start;
-        flex-wrap: wrap;
-    }
-
-    .logo {
-        margin: 0 2rem 0 0;
-    }
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
 }
 </style>