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

.eslintrc.js

@@ -519,5 +519,11 @@ module.exports = {
         'no-unused-expressions': 'off',
       },
     },
+    {
+      files: ["packages/@uppy/vue/**"],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+      },
+    },
   ],
 }

examples/vue3/package.json

@@ -14,6 +14,7 @@
     "@uppy/progress-bar": "workspace:*",
     "@uppy/tus": "workspace:*",
     "@uppy/vue": "workspace:*",
+    "@uppy/webcam": "workspace:*",
     "vue": "^3.2.33"
   },
   "devDependencies": {

examples/vue3/src/App.vue

@@ -1,7 +1,3 @@
-<script setup>
-import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
-</script>
-
 <template>
   <div id="app">
     <!-- <HelloWorld msg="Welcome to Uppy Vue Demo"/> -->
@@ -61,23 +57,32 @@ import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
   </div>
 </template>
 
+<script setup>
+import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
+</script>
+
 <script>
 import Uppy from '@uppy/core'
 import Tus from '@uppy/tus'
+import Webcam from '@uppy/webcam'
 import { defineComponent } from 'vue'
 
 const { VITE_TUS_ENDPOINT: TUS_ENDPOINT } = import.meta.env
 
 export default defineComponent({
   computed: {
     uppy: () =>
-      new Uppy({ id: 'uppy1', autoProceed: true, debug: true }).use(Tus, {
-        endpoint: TUS_ENDPOINT,
-      }),
+      new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
+        .use(Tus, {
+          endpoint: TUS_ENDPOINT,
+        })
+        .use(Webcam),
     uppy2: () =>
-      new Uppy({ id: 'uppy2', autoProceed: false, debug: true }).use(Tus, {
-        endpoint: TUS_ENDPOINT,
-      }),
+      new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
+        .use(Tus, {
+          endpoint: TUS_ENDPOINT,
+        })
+        .use(Webcam),
   },
   data() {
     return {

packages/@uppy/file-input/src/index.ts

@@ -1 +1,2 @@
 export { default } from './FileInput.tsx'
+export type { FileInputOptions } from './FileInput.tsx'

packages/@uppy/vue/.npmignore

@@ -1 +1 @@
-# This file need to be there so .gitignored files are still uploaded to the npm registry.
+tsconfig.*

packages/@uppy/vue/package.json

@@ -2,12 +2,13 @@
   "name": "@uppy/vue",
   "version": "1.1.2",
   "license": "MIT",
+  "type": "module",
   "main": "lib/index.js",
   "dependencies": {
     "shallow-equal": "^1.2.1"
   },
   "devDependencies": {
-    "vue": "^2.6.14"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
@@ -16,7 +17,7 @@
     "@uppy/file-input": "workspace:^",
     "@uppy/progress-bar": "workspace:^",
     "@uppy/status-bar": "workspace:^",
-    "vue": ">=2.6.11"
+    "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "@uppy/dashboard": {