@uppy/vue: migrate to Composition API with TS & drop Vue 2 support

[Murderlon]

• Drop Vue 2 support which has been EOL since 31 December 2023.
• Remove vue 2 from examples
• Refactor @uppy/vue to Composition API with TS
• Tested this works with our vue3 example project.

AFAIK the recommended way is to publish Vue packages using Single File Components syntax, which has better TS support, but that requires a compiler setup which we don't have here. To keep it simple, I'm writing components in TS. The only downside is typing props, which is a bit awkward now like this:

   props: {
      type: Object as PropType<DashboardModalOptions<any, any>>,
    },

Inside SFC's you can properly type with TS:

const props = defineProps<{
  foo: string
  bar?: number
}>()

[github-actions]

Diff output files

diff --git a/packages/@uppy/vue/lib/dashboard-modal.js b/packages/@uppy/vue/lib/dashboard-modal.js
index e9e5509..e651eaa 100644
--- a/packages/@uppy/vue/lib/dashboard-modal.js
+++ b/packages/@uppy/vue/lib/dashboard-modal.js
@@ -1,93 +1,51 @@
+import { Uppy } from "@uppy/core";
 import DashboardPlugin from "@uppy/dashboard";
-import { shallowEqualObjects } from "shallow-equal";
-import * as Vue from "vue";
-import { isVue2 } from "./utils.js";
-export default {
-  data() {
-    return {
-      plugin: {},
-    };
-  },
+import { defineComponent, h, ref, watch } from "vue";
+import useUppy from "./useUppy";
+export default defineComponent({
+  name: "DashboardModal",
   props: {
     uppy: {
+      type: Uppy,
       required: true,
     },
     props: {
       type: Object,
     },
-    plugins: {
-      type: Array,
-    },
     open: {
       type: Boolean,
       required: true,
     },
   },
-  mounted() {
-    this.installPlugin();
-  },
-  methods: {
-    installPlugin() {
+  setup(props) {
+    const containerRef = ref();
+    const pluginRef = ref();
+    const propsRef = ref(props);
+    const onMount = () => {
       const {
         uppy,
-      } = this;
+      } = props;
       const options = {
-        id: "vue:DashboardModal",
-        plugins: this.plugins,
-        ...this.props,
-        target: this.$refs.container,
+        id: "DashboardModal",
+        inline: false,
+        ...props,
+        target: containerRef.value,
       };
       uppy.use(DashboardPlugin, options);
-      this.plugin = uppy.getPlugin(options.id);
-      if (this.open) {
-        this.plugin.openModal();
-      }
-    },
-    uninstallPlugin(uppy) {
-      uppy.removePlugin(this.plugin);
-    },
-  },
-  beforeDestroy() {
-    this.uninstallPlugin(this.uppy);
-  },
-  beforeUnmount() {
-    this.uninstallPlugin(this.uppy);
-  },
-  watch: {
-    uppy(current, old) {
-      if (old !== current) {
-        this.uninstallPlugin(old);
-        this.installPlugin();
-      }
-    },
-    open(current, old) {
+      pluginRef.value = uppy.getPlugin(options.id);
+    };
+    useUppy(onMount, pluginRef, props.uppy, propsRef);
+    watch(() => props.open, (current, old) => {
       if (current && !old) {
-        this.plugin.openModal();
+        pluginRef.value.openModal();
       }
       if (!current && old) {
-        this.plugin.closeModal();
-      }
-    },
-    props(current, old) {
-      if (!shallowEqualObjects(current, old)) {
-        this.plugin.setOptions({
-          ...current,
-        });
+        pluginRef.value.closeModal();
       }
-    },
-  },
-  render() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (isVue2(...args)) {
-      const [createElement] = args;
-      return createElement("div", {
-        ref: "container",
-      });
-    }
-    return Vue.h("div", {
-      ref: "container",
     });
+    return () =>
+      h("div", {
+        ref: containerRef,
+      });
   },
-};
+});
diff --git a/packages/@uppy/vue/lib/dashboard.js b/packages/@uppy/vue/lib/dashboard.js
index 9be5ef4..4350afb 100644
--- a/packages/@uppy/vue/lib/dashboard.js
+++ b/packages/@uppy/vue/lib/dashboard.js
@@ -1,79 +1,38 @@
 import DashboardPlugin from "@uppy/dashboard";
-import { shallowEqualObjects } from "shallow-equal";
-import * as Vue from "vue";
-import { isVue2 } from "./utils.js";
-export default {
-  data() {
-    return {
-      plugin: {},
-    };
-  },
+import { defineComponent, h, ref } from "vue";
+import useUppy from "./useUppy";
+export default defineComponent({
+  name: "Dashboard",
   props: {
     uppy: {
+      type: Object,
       required: true,
     },
     props: {
       type: Object,
     },
-    plugins: {
-      type: Array,
-    },
   },
-  mounted() {
-    this.installPlugin();
-  },
-  methods: {
-    installPlugin() {
+  setup(props) {
+    const containerRef = ref();
+    const pluginRef = ref();
+    const propsRef = ref(props.props);
+    const onMount = () => {
       const {
         uppy,
-      } = this;
+      } = props;
       const options = {
-        id: "vue:Dashboard",
+        id: "Dashboard",
         inline: true,
-        plugins: this.plugins,
-        ...this.props,
-        target: this.$refs.container,
+        ...props,
+        target: containerRef.value,
       };
       uppy.use(DashboardPlugin, options);
-      this.plugin = uppy.getPlugin(options.id);
-    },
-    uninstallPlugin(uppy) {
-      uppy.removePlugin(this.plugin);
-    },
-  },
-  beforeDestroy() {
-    this.uninstallPlugin(this.uppy);
-  },
-  beforeUnmount() {
-    this.uninstallPlugin(this.uppy);
-  },
-  watch: {
-    uppy(current, old) {
-      if (old !== current) {
-        this.uninstallPlugin(old);
-        this.installPlugin();
-      }
-    },
-    props(current, old) {
-      if (!shallowEqualObjects(current, old)) {
-        this.plugin.setOptions({
-          ...current,
-        });
-      }
-    },
-  },
-  render() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (isVue2(...args)) {
-      const [createElement] = args;
-      return createElement("div", {
-        ref: "container",
+      pluginRef.value = uppy.getPlugin(options.id);
+    };
+    useUppy(onMount, pluginRef, props.uppy, propsRef);
+    return () =>
+      h("div", {
+        ref: containerRef,
       });
-    }
-    return Vue.h("div", {
-      ref: "container",
-    });
   },
-};
+});
diff --git a/packages/@uppy/vue/lib/drag-drop.js b/packages/@uppy/vue/lib/drag-drop.js
index 3e2c986..fe3b597 100644
--- a/packages/@uppy/vue/lib/drag-drop.js
+++ b/packages/@uppy/vue/lib/drag-drop.js
@@ -1,74 +1,38 @@
+import { Uppy } from "@uppy/core";
 import DragDropPlugin from "@uppy/drag-drop";
-import { shallowEqualObjects } from "shallow-equal";
-import * as Vue from "vue";
-import { isVue2 } from "./utils.js";
-export default {
-  data() {
-    return {
-      plugin: {},
-    };
-  },
+import { defineComponent, h, ref } from "vue";
+import useUppy from "./useUppy";
+export default defineComponent({
+  name: "DragDrop",
   props: {
     uppy: {
+      type: Uppy,
       required: true,
     },
     props: {
       type: Object,
     },
   },
-  mounted() {
-    this.installPlugin();
-  },
-  methods: {
-    installPlugin() {
+  setup(props) {
+    const containerRef = ref();
+    const pluginRef = ref();
+    const propsRef = ref(props.props);
+    const onMount = () => {
       const {
         uppy,
-      } = this;
+      } = props;
       const options = {
-        id: "vue:DragDrop",
-        ...this.props,
-        target: this.$refs.container,
+        id: "DragDrop",
+        ...props,
+        target: containerRef.value,
       };
       uppy.use(DragDropPlugin, options);
-      this.plugin = uppy.getPlugin(options.id);
-    },
-    uninstallPlugin(uppy) {
-      uppy.removePlugin(this.plugin);
-    },
-  },
-  beforeDestroy() {
-    this.uninstallPlugin(this.uppy);
-  },
-  beforeUnmount() {
-    this.uninstallPlugin(this.uppy);
-  },
-  watch: {
-    uppy(current, old) {
-      if (old !== current) {
-        this.uninstallPlugin(old);
-        this.installPlugin();
-      }
-    },
-    props(current, old) {
-      if (!shallowEqualObjects(current, old)) {
-        this.plugin.setOptions({
-          ...current,
-        });
-      }
-    },
-  },
-  render() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (isVue2(...args)) {
-      const [createElement] = args;
-      return createElement("div", {
-        ref: "container",
+      pluginRef.value = uppy.getPlugin(options.id);
+    };
+    useUppy(onMount, pluginRef, props.uppy, propsRef);
+    return () =>
+      h("div", {
+        ref: containerRef,
       });
-    }
-    return Vue.h("div", {
-      ref: "container",
-    });
   },
-};
+});
diff --git a/packages/@uppy/vue/lib/file-input.js b/packages/@uppy/vue/lib/file-input.js
index 38a2812..8c6657b 100644
--- a/packages/@uppy/vue/lib/file-input.js
+++ b/packages/@uppy/vue/lib/file-input.js
@@ -1,74 +1,38 @@
+import { Uppy } from "@uppy/core";
 import FileInputPlugin from "@uppy/file-input";
-import { shallowEqualObjects } from "shallow-equal";
-import * as Vue from "vue";
-import { isVue2 } from "./utils.js";
-export default {
-  data() {
-    return {
-      plugin: {},
-    };
-  },
+import { defineComponent, h, ref } from "vue";
+import useUppy from "./useUppy";
+export default defineComponent({
+  name: "FileInput",
   props: {
     uppy: {
+      type: Uppy,
       required: true,
     },
     props: {
       type: Object,
     },
   },
-  mounted() {
-    this.installPlugin();
-  },
-  methods: {
-    installPlugin() {
+  setup(props) {
+    const containerRef = ref();
+    const pluginRef = ref();
+    const propsRef = ref(props.props);
+    const onMount = () => {
       const {
         uppy,
-      } = this;
+      } = props;
       const options = {
-        id: "vue:FileInput",
-        ...this.props,
-        target: this.$refs.container,
+        id: "FileInput",
+        ...props,
+        target: containerRef.value,
       };
       uppy.use(FileInputPlugin, options);
-      this.plugin = uppy.getPlugin(options.id);
-    },
-    uninstallPlugin(uppy) {
-      uppy.removePlugin(this.plugin);
-    },
-  },
-  beforeDestroy() {
-    this.uninstallPlugin(this.uppy);
-  },
-  beforeUnmount() {
-    this.uninstallPlugin(this.uppy);
-  },
-  watch: {
-    uppy(current, old) {
-      if (old !== current) {
-        this.uninstallPlugin(old);
-        this.installPlugin();
-      }
-    },
-    props(current, old) {
-      if (!shallowEqualObjects(current, old)) {
-        this.plugin.setOptions({
-          ...current,
-        });
-      }
-    },
-  },
-  render() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (isVue2(...args)) {
-      const [createElement] = args;
-      return createElement("div", {
-        ref: "container",
+      pluginRef.value = uppy.getPlugin(options.id);
+    };
+    useUppy(onMount, pluginRef, props.uppy, propsRef);
+    return () =>
+      h("div", {
+        ref: containerRef,
       });
-    }
-    return Vue.h("div", {
-      ref: "container",
-    });
   },
-};
+});
diff --git a/packages/@uppy/vue/lib/progress-bar.js b/packages/@uppy/vue/lib/progress-bar.js
index 133db64..b967075 100644
--- a/packages/@uppy/vue/lib/progress-bar.js
+++ b/packages/@uppy/vue/lib/progress-bar.js
@@ -1,71 +1,38 @@
+import { Uppy } from "@uppy/core";
 import ProgressBarPlugin from "@uppy/progress-bar";
-import { shallowEqualObjects } from "shallow-equal";
-import * as Vue from "vue";
-import { isVue2 } from "./utils.js";
-export default {
-  data() {
-    return {
-      plugin: {},
-    };
-  },
+import { defineComponent, h, ref } from "vue";
+import useUppy from "./useUppy";
+export default defineComponent({
+  name: "ProgressBar",
   props: {
     uppy: {
+      type: Uppy,
       required: true,
     },
     props: {
       type: Object,
     },
   },
-  mounted() {
-    this.installPlugin();
-  },
-  methods: {
-    installPlugin() {
+  setup(props) {
+    const containerRef = ref();
+    const pluginRef = ref();
+    const propsRef = ref(props.props);
+    const onMount = () => {
       const {
         uppy,
-      } = this;
+      } = props;
       const options = {
-        id: "vue:ProgressBar",
-        ...this.props,
-        target: this.$refs.container,
+        id: "ProgressBar",
+        ...props,
+        target: containerRef.value,
       };
       uppy.use(ProgressBarPlugin, options);
-      this.plugin = uppy.getPlugin(options.id);
-    },
-    uninstallPlugin(uppy) {
-      uppy.removePlugin(this.plugin);
-    },
-  },
-  beforeDestroy() {
-    this.uninstallPlugin(this.uppy);
-  },
-  watch: {
-    uppy(current, old) {
-      if (old !== current) {
-        this.uninstallPlugin(old);
-        this.installPlugin();
-      }
-    },
-    props(current, old) {
-      if (!shallowEqualObjects(current, old)) {
-        this.plugin.setOptions({
-          ...current,
-        });
-      }
-    },
-  },
-  render() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (isVue2(...args)) {
-      const [createElement] = args;
-      return createElement("div", {
-        ref: "container",
+      pluginRef.value = uppy.getPlugin(options.id);
+    };
+    useUppy(onMount, pluginRef, props.uppy, propsRef);
+    return () =>
+      h("div", {
+        ref: containerRef,
       });
-    }
-    return Vue.h("div", {
-      ref: "container",
-    });
   },
-};
+});
diff --git a/packages/@uppy/vue/lib/status-bar.js b/packages/@uppy/vue/lib/status-bar.js
index a3f56ed..6d4444d 100644
--- a/packages/@uppy/vue/lib/status-bar.js
+++ b/packages/@uppy/vue/lib/status-bar.js
@@ -1,74 +1,38 @@
+import { Uppy } from "@uppy/core";
 import StatusBarPlugin from "@uppy/status-bar";
-import { shallowEqualObjects } from "shallow-equal";
-import * as Vue from "vue";
-import { isVue2 } from "./utils.js";
-export default {
-  data() {
-    return {
-      plugin: {},
-    };
-  },
+import { defineComponent, h, ref } from "vue";
+import useUppy from "./useUppy";
+export default defineComponent({
+  name: "StatusBar",
   props: {
     uppy: {
+      type: Uppy,
       required: true,
     },
     props: {
       type: Object,
     },
   },
-  mounted() {
-    this.installPlugin();
-  },
-  methods: {
-    installPlugin() {
+  setup(props) {
+    const containerRef = ref();
+    const pluginRef = ref();
+    const propsRef = ref(props.props);
+    const onMount = () => {
       const {
         uppy,
-      } = this;
+      } = props;
       const options = {
-        id: "vue:StatusBar",
-        ...this.props,
-        target: this.$refs.container,
+        id: "StatusBar",
+        ...props,
+        target: containerRef.value,
       };
       uppy.use(StatusBarPlugin, options);
-      this.plugin = uppy.getPlugin(options.id);
-    },
-    uninstallPlugin(uppy) {
-      uppy.removePlugin(this.plugin);
-    },
-  },
-  beforeDestroy() {
-    this.uninstallPlugin(this.uppy);
-  },
-  beforeUnmount() {
-    this.uninstallPlugin(this.uppy);
-  },
-  watch: {
-    uppy(current, old) {
-      if (old !== current) {
-        this.uninstallPlugin(old);
-        this.installPlugin();
-      }
-    },
-    props(current, old) {
-      if (!shallowEqualObjects(current, old)) {
-        this.plugin.setOptions({
-          ...current,
-        });
-      }
-    },
-  },
-  render() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (isVue2(...args)) {
-      const [createElement] = args;
-      return createElement("div", {
-        ref: "container",
+      pluginRef.value = uppy.getPlugin(options.id);
+    };
+    useUppy(onMount, pluginRef, props.uppy, propsRef);
+    return () =>
+      h("div", {
+        ref: containerRef,
       });
-    }
-    return Vue.h("div", {
-      ref: "container",
-    });
   },
-};
+});

[aduh95]

I can't vouch for all the code, but I can confirm the example works.

[aduh95]

Error: Webpack Compilation Error
[tsl] ERROR
      TS5110: Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.