fix(example): clean up Nuxt example & fix type-checking

Author: Joepocalyptic

apps/nuxt3/.npmrc

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

apps/nuxt3/app.vue

@@ -1,55 +1,56 @@
 <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 { IOptions } from "tsparticles-engine";
+import {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 = {
+  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
     }
-};
+  }
+} as IOptions
+
+const particlesInit = async (engine) => {
+  await loadFull(engine)
+  console.log(engine)
+}
+
+const particlesLoaded = (container: Container) => {
+  console.log(toRaw(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:^",