build: fixing build issues

Author: matteobruni

README.md

@@ -29,7 +29,7 @@ Vue.use(Particles);
 ```html
 <template>
     <div id="app">
-        <Particles
+        <vue-particles
             id="tsparticles"
             :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"
@@ -38,7 +38,7 @@ Vue.use(Particles);
 
         <!-- or -->
 
-        <Particles
+        <vue-particles
             id="tsparticles"
             :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"

apps/vue2/.babelrc

@@ -1,16 +1,28 @@
 {
-    "plugins": [
-        [
-            "@babel/proposal-decorators",
-            {
-                "legacy": true
-            }
-        ],
-        [
-            "@babel/proposal-class-properties",
-            {
-                "loose": true
-            }
-        ]
+  "plugins": [
+    [
+      "@babel/proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-private-methods",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-private-property-in-object",
+      {
+        "loose": true
+      }
     ]
-}
+  ]
+}

apps/vue2/package.json

@@ -44,6 +44,7 @@
     "babel-loader": "^8.3.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "postcss": "^8.4.26",
     "prettier": "^3.0.0",
     "rollup": "^2.79.1",

apps/vue2/rollup.config.js

@@ -1,5 +1,5 @@
 import vue from 'rollup-plugin-vue';
-import typescript from 'rollup-plugin-typescript';
+import typescript from 'rollup-plugin-typescript2';
 import json from '@rollup/plugin-json';
 import {terser} from 'rollup-plugin-terser';
 

apps/vue2/src/App.vue

@@ -1,22 +1,18 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png"/>
-    <Particles id="tsparticles" :options="options" :particlesInit="particlesInit"/>
+    <vue-particles id="tsparticles" :options="options" :particlesInit="particlesInit"/>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue } from "vue-property-decorator";
 import type { Engine } from "tsparticles-engine";
 import { loadFull } from "tsparticles";
-import { basic } from "tsparticles-demo-configs";
-
-import Particles from "vue2-particles";
-
-Vue.use(Particles);
+import configs from "tsparticles-demo-configs";
 
 export default class App extends Vue {
-  options = basic;
+  options = configs.basic;
 
   async particlesInit(engine: Engine) {
     await loadFull(engine);

apps/vue2/src/main.ts

@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Particles from "vue2-particles";
 
 Vue.config.productionTip = false
 
+
+Vue.use(Particles);
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')

components/vue2-alt/README.md

@@ -29,7 +29,7 @@ Vue.use(Particles);
 ```html
 <template>
     <div id="app">
-        <Particles
+        <vue-particles
             id="tsparticles"
             :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"
@@ -38,7 +38,7 @@ Vue.use(Particles);
 
         <!-- or -->
 
-        <Particles
+        <vue-particles
             id="tsparticles"
             :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"

components/vue2-alt/src/Particles/index.ts

@@ -2,8 +2,9 @@ import Vue from "vue";
 import particles from "./Particles.vue";
 
 const VueParticles = {
-    install: (vue: typeof Vue, options: unknown) => {
+    install: (vue: typeof Vue) => {
         vue.component("Particles", particles);
+        vue.component("vue-particles", particles);
     },
 };
 

components/vue2/README.md

@@ -29,7 +29,7 @@ Vue.use(Particles);
 ```html
 <template>
     <div id="app">
-        <Particles
+        <vue-particles
             id="tsparticles"
             :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"
@@ -38,7 +38,7 @@ Vue.use(Particles);
 
         <!-- or -->
 
-        <Particles
+        <vue-particles
             id="tsparticles"
             :particlesInit="particlesInit"
             :particlesLoaded="particlesLoaded"

components/vue2/src/Particles/index.ts

@@ -2,8 +2,9 @@ import Vue from "vue";
 import particles from "./Particles.vue";
 
 const VueParticles = {
-    install: (vue: typeof Vue, options: unknown) => {
+    install: (vue: typeof Vue) => {
         vue.component("Particles", particles);
+        vue.component("vue-particles", particles);
     },
 };