fix: fixed issue with engine not loading correctly, closes: #26

Author: matteobruni

apps/vue3/src/components/Particles/Particles.vue

@@ -1,6 +1,5 @@
 import { createApp } from "vue";
-//import Particles from "vue3-particles";
-import Particles from "./components/Particles";
+import Particles from "vue3-particles";
 import App from "./App.vue";
 import router from "./router";
 

apps/vue3/src/components/Particles/index.ts

@@ -17,20 +17,20 @@ export default defineComponent({
     props: {
         id: {
             type: String,
-            required: true
+            required: true,
         },
         options: {
-            type: Object as PropType<IParticlesProps>
+            type: Object as PropType<IParticlesProps>,
         },
         url: {
-            type: String
+            type: String,
         },
         particlesLoaded: {
-            type: Function as PropType<(container: Container) => void>
+            type: Function as PropType<(container: Container) => void>,
         },
         particlesInit: {
-            type: Function as PropType<(engine: Engine) => Promise<void>>
-        }
+            type: Function as PropType<(engine: Engine) => Promise<void>>,
+        },
     },
     mounted(): void {
         nextTick(async () => {
@@ -47,7 +47,7 @@ export default defineComponent({
             container = await tsParticles.load({
                 id: this.id,
                 url: this.url,
-                options: this.options
+                options: this.options,
             });
 
             if (this.particlesLoaded && container) {
@@ -61,6 +61,6 @@ export default defineComponent({
 
             container = undefined;
         }
-    }
+    },
 });
 </script>

apps/vue3/src/main.ts

@@ -7,27 +7,27 @@ import dts from "vite-plugin-dts";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/components/index.ts"),
-      name: "particles.vue3",
-      fileName: (format) => `particles.vue3.${format}.js`,
-    },
-    rollupOptions: {
-      external: ["vue"],
-      output: {
-        // Provide global variables to use in the UMD build
-        // Add external deps here
-        globals: {
-          vue: "Vue",
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, "src/components/index.ts"),
+            name: "particles.vue3",
+            fileName: format => `particles.vue3.${format}.js`,
+        },
+        rollupOptions: {
+            external: ["vue", "tsparticles-engine"],
+            output: {
+                // Provide global variables to use in the UMD build
+                // Add external deps here
+                globals: {
+                    vue: "Vue",
+                },
+            },
         },
-      },
     },
-  },
-  plugins: [vue(), vueJsx(), dts()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    plugins: [vue(), vueJsx(), dts()],
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
+        },
     },
-  },
 });

components/vue3-alt/src/components/Particles.vue

@@ -17,20 +17,20 @@ export default defineComponent({
     props: {
         id: {
             type: String,
-            required: true
+            required: true,
         },
         options: {
-            type: Object as PropType<IParticlesProps>
+            type: Object as PropType<IParticlesProps>,
         },
         url: {
-            type: String
+            type: String,
         },
         particlesLoaded: {
-            type: Function as PropType<(container: Container) => void>
+            type: Function as PropType<(container: Container) => void>,
         },
         particlesInit: {
-            type: Function as PropType<(engine: Engine) => Promise<void>>
-        }
+            type: Function as PropType<(engine: Engine) => Promise<void>>,
+        },
     },
     mounted(): void {
         nextTick(async () => {
@@ -47,7 +47,7 @@ export default defineComponent({
             container = await tsParticles.load({
                 id: this.id,
                 url: this.url,
-                options: this.options
+                options: this.options,
             });
 
             if (this.particlesLoaded && container) {
@@ -61,6 +61,6 @@ export default defineComponent({
 
             container = undefined;
         }
-    }
+    },
 });
 </script>

components/vue3-alt/vite.config.ts

@@ -7,27 +7,27 @@ import dts from "vite-plugin-dts";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/components/index.ts"),
-      name: "vue3-particles",
-      fileName: (format) => `vue3-particles.${format}.js`,
-    },
-    rollupOptions: {
-      external: ["vue"],
-      output: {
-        // Provide global variables to use in the UMD build
-        // Add external deps here
-        globals: {
-          vue: "Vue",
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, "src/components/index.ts"),
+            name: "vue3-particles",
+            fileName: format => `vue3-particles.${format}.js`,
+        },
+        rollupOptions: {
+            external: ["vue", "tsparticles-engine"],
+            output: {
+                // Provide global variables to use in the UMD build
+                // Add external deps here
+                globals: {
+                    vue: "Vue",
+                },
+            },
         },
-      },
     },
-  },
-  plugins: [vue(), vueJsx(), dts()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    plugins: [vue(), vueJsx(), dts()],
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
+        },
     },
-  },
 });