Upgraded to Vue3

package.json

@@ -2,38 +2,40 @@
   "name": "vue-p5",
   "version": "0.9.0-rc2",
   "description": "Vue component wrapper for p5.js",
-  "main": "dist/vue-p5.js",
+  "author": "Ruslan Fadeev",
   "scripts": {
     "build": "rollup --config",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Kinrany/vue-p5.git"
-  },
-  "keywords": [
-    "Vue",
-    "p5js"
-  ],
-  "author": "Ruslan Fadeev",
-  "license": "LGPL-2.1",
-  "bugs": {
-    "url": "https://github.com/Kinrany/vue-p5/issues"
+  "main": "dist/vue-p5.js",
+  "dependencies": {
+    "p5": "^0.9.0",
+    "vue": "^3.0.5"
   },
-  "homepage": "https://github.com/Kinrany/vue-p5#readme",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "@vue/compiler-sfc": "^3.0.5",
     "postcss": "^7.0.27",
     "rollup": "^1.32.1",
-    "rollup-plugin-vue": "^5.1.6",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "rollup-plugin-vue": "^6.0.0",
+    "vue-cli-plugin-vue-next": "~0.1.4",
+    "vue-loader": "^15.9.6"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^3.0.5"
   },
-  "dependencies": {
-    "p5": "^1.0.0"
+  "bugs": {
+    "url": "https://github.com/Kinrany/vue-p5/issues"
+  },
+  "homepage": "https://github.com/Kinrany/vue-p5#readme",
+  "keywords": [
+    "Vue",
+    "p5js"
+  ],
+  "license": "LGPL-2.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kinrany/vue-p5.git"
   }
 }

src/main.js

@@ -1,9 +1,7 @@
 import VueP5 from "./p5.vue";
 
-export default VueP5;
-
-// `typeof Vue !== 'undefined'` prevents
-// the "Vue is not defined" error
-if (typeof Vue !== 'undefined' && Vue) {
-  Vue.component('vue-p5', VueP5);
+export default {
+  install (app) {
+    app.component('vue-p5', VueP5)
+  }
 }

src/p5.vue

@@ -1,72 +1,72 @@
 <template>
-  <div></div>
+  <div ref="sketchRef"></div>
 </template>
-
 <script>
-import p5 from "p5/lib/p5.min.js";
-
-function distinct(arr) {
-  return Array.from(new Set(arr));
-}
+import P5 from "p5/lib/p5.min.js";
+import { defineComponent, onMounted, computed, ref } from 'vue'
 
 const initialEvents = [
-  "preload",
-  "setup",
-  "draw",
+  'preload',
+  'setup',
+  'draw',
 
-  "deviceMoved",
-  "deviceTurned",
-  "deviceShaken",
+  'deviceMoved',
+  'deviceTurned',
+  'deviceShaken',
 
-  "keyPressed",
-  "keyReleased",
-  "keyTyped",
+  'keyPressed',
+  'keyReleased',
+  'keyTyped',
 
-  "mouseMoved",
-  "mouseDragged",
-  "mousePressed",
-  "mouseReleased",
-  "mouseClicked",
-  "doubleClicked",
-  "mouseWheel",
+  'mouseMoved',
+  'mouseDragged',
+  'mousePressed',
+  'mouseReleased',
+  'mouseClicked',
+  'doubleClicked',
+  'mouseWheel',
 
-  "touchStarted",
-  "touchMoved",
-  "touchEnded",
+  'touchStarted',
+  'touchMoved',
+  'touchEnded',
 
-  "windowResized"
-];
+  'windowResized'
+]
 
-export default {
-  // re-export p5 for use with other libraries
-  p5,
+export default defineComponent({
+  name: 'VueP5',
+  emits: ['sketch', ...initialEvents.map(e => e.toLowerCase())],
+  props: ['additionalEvents'],
+  setup (props, { emit }) {
+    const p5Events = computed(() => {
+      if (Array.isArray(props.additionalEvents)) {
+        return Array.from(new Set(props.additionalEvents))
+      }
+      return initialEvents
+    })
 
-  name: "VueP5",
-  props: ["additionalEvents"],
-  computed: {
-    p5Events() {
-      const { additionalEvents } = this;
-      return Array.isArray(additionalEvents)
-        ? distinct(initialEvents.concat(additionalEvents))
-        : initialEvents;
-    }
-  },
-  mounted() {
-    new p5(sketch => {
-      this.$emit("sketch", sketch);
+    const sketchRef = ref()
 
-      for (const p5EventName of this.p5Events) {
-        const vueEventName = p5EventName.toLowerCase();
-        const savedCallback = sketch[p5EventName];
+    onMounted(() => {
+      return new P5(sketch => {
+        emit('sketch', sketch)
+        for (const p5EventName of p5Events.value) {
+          const vueEventName = p5EventName.toLowerCase()
+          const savedCallback = sketch[p5EventName]
 
-        sketch[p5EventName] = (...args) => {
-          if (savedCallback) {
-            savedCallback(sketch, ...args);
+          sketch[p5EventName] = (...args) => {
+            if (savedCallback) {
+              savedCallback(sketch, ...args)
+            }
+            emit(vueEventName, sketch, ...args)
           }
-          this.$emit(vueEventName, sketch, ...args);
-        };
-      }
-    }, this.$el);
+        }
+      }, sketchRef.value)
+    })
+    return {
+      sketchRef,
+      p5Events
+    }
   }
-};
+})
 </script>