# DragDrop in Vue page using @uppy/vue components

**URL:** <https://community.transloadit.com/t/dragdrop-in-vue-page-using-uppy-vue-components/17001>\
**Category:** Uppy\
**Created:** [February 12, 2024, 7:54pm UTC](https://community.transloadit.com/t/dragdrop-in-vue-page-using-uppy-vue-components/17001 "2024-02-12T19:54:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![clabnet](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/clabnet/32/1091_2.png) [@clabnet](https://community.transloadit.com/u/clabnet)\
**Post date:** [February 12, 2024, 7:54pm UTC](https://community.transloadit.com/t/dragdrop-in-vue-page-using-uppy-vue-components/17001/1 "2024-02-12T19:54:40Z")

</div>

Uppy is mounted as Dashboard on a Vue 3 page using `<script setup lang="ts">` and `@uppy/vue`.

All work fine except the DragDrop feature.

When I try to drag a file to gray dashboard it show a red circle icon.

```auto
<script setup lang="ts">
  import '@uppy/core/dist/style.min.css'
  import '@uppy/dashboard/dist/style.min.css'
  import '@uppy/drag-drop/dist/style.min.css'
  import '@uppy/progress-bar/dist/style.min.css'
  import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'

  import Uppy from '@uppy/core'
  import XHRUpload from '@uppy/xhr-upload'

  const uppy = computed(() => {
    return new Uppy({
    })
      .use(DragDrop, { target: '#drag-drop' }) <=== here the target has an error (see below)
      .use(XHRUpload, {
         endpoint: 'http://localhost:5000/files/?targetFolder=xyz',
        fieldName: 'file'
      })
  })
</script>

<template>
  <div>
    <Dashboard :uppy="uppy" :open="open" :props="{ width: '100%', onRequestCloseModal: handleClose, proudlyDisplayPoweredByUppy: false }" />
  </div>
</template>

```

The error on target attribute is :  
`Object literal may only specify known properties, and 'target' does not exist in type 'PluginOptions'.ts(2353)`

Any chance to work ? Thank’s in advance