I've been trying to get Uppy working in my Vue TypeScript project for a few hours now. I am using Vue2 with the class components and Nuxt.
I have already tried to provide Uppy via a getter (since the documentation says so),
get uppy() {
return Uppy<Uppy.StrictTypes>({
restrictions: {
allowedFileTypes: ["image/*"],
maxNumberOfFiles: 1
}
}).use(ImageEditor, {
id: "ImageEditor",
quality: 0.8,
cropperOptions: {
viewMode: 1,
aspectRatio: 1,
background: false,
autoCropArea: 1,
responsive: true
},
actions: {
revert: true,
rotate: true,
flip: true,
zoomIn: true,
zoomOut: true,
cropSquare: true,
cropWidescreen: true,
cropWidescreenVertical: true
}
});
as well as an attribute.
private uppy = Uppy<Uppy.StrictTypes>({
restrictions: {
allowedFileTypes: ["image/*"],
maxNumberOfFiles: 1
}
}).use(ImageEditor, {
id: "ImageEditor",
quality: 0.8,
cropperOptions: {
viewMode: 1,
aspectRatio: 1,
background: false,
autoCropArea: 1,
responsive: true
},
actions: {
revert: true,
rotate: true,
flip: true,
zoomIn: true,
zoomOut: true,
cropSquare: true,
cropWidescreen: true,
cropWidescreenVertical: true
}
});
My entire file looks like this
<template>
<div>
<dashboard
:uppy="uppy"
:plugins="['ImageEditor']"
/>
</div>
</template>
<script lang="ts">
import Uppy from "@uppy/core";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import "@uppy/image-editor/dist/style.css";
import { Dashboard } from "@uppy/vue";
import ImageEditor from "@uppy/image-editor";
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {
Dashboard
}
})
export default class uppyUpload extends Vue {
private uppy = Uppy<Uppy.StrictTypes>({
restrictions: {
allowedFileTypes: ["image/*"],
maxNumberOfFiles: 1
}
}).use(ImageEditor, {
id: "ImageEditor",
quality: 0.8,
cropperOptions: {
viewMode: 1,
aspectRatio: 1,
background: false,
autoCropArea: 1,
responsive: true
},
actions: {
revert: true,
rotate: true,
flip: true,
zoomIn: true,
zoomOut: true,
cropSquare: true,
cropWidescreen: true,
cropWidescreenVertical: true
}
});
beforeDestroy(): void {
this.uppy.close();
}
}
</script>
Already after compiling I get an warning in the console:
WARN in ./node_modules/@uppy/vue/lib/dashboard.js "export 'h' (imported as 'Vue') was not found in 'vue'
However, when I try to load the page, I get the error that export is a unexpected token
Unfortunately, I have no more idea what I could do wrong. Do any of you have any ideas?