fix(example): clean up Vite example and remove dead code

Author: Joepocalyptic

apps/vue3/src/App.vue

@@ -3,104 +3,89 @@ 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);
+  await loadFull(engine);
 
-    console.log(engine);
+  console.log(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>