uppy/docs/framework-integrations/vue.mdx

---
slug: /vue
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Vue

[Vue][] components for the Uppy UI plugins.

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/vue
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/vue
```

  </TabItem>
</Tabs>

:::note

You also need to install the UI plugin you want to use. For instance,
`@uppy/dashboard`.

:::

## Use

The following plugins are available as Vue component wrappers:

- `<Dashboard />` renders [`@uppy/dashboard`](/docs/dashboard) inline
- `<DashboardModal />` renders [`@uppy/dashboard`](/docs/dashboard) as a modal
- `<DragDrop />` renders [`@uppy/drag-drop`](/docs/drag-drop)
- `<ProgressBar />` renders [`@uppy/progress-bar`](/docs/progress-bar)
- `<StatusBar />` renders [`@uppy/status-bar`](/docs/status-bar)

Instead of adding a UI plugin to an Uppy instance with `.use()`, the Uppy
instance can be passed into components as an `uppy` prop. Due to the way Vue
handles reactivity, you can initialize Uppy the same way you would with vanilla
JavaScript.

```html
<script>
	import { Dashboard } from '@uppy/vue';
	import Uppy from '@uppy/core';
	import Webcam from '@uppy/webcam';

	// Don't forget the CSS: core and UI components + plugins you are using
	import '@uppy/core/dist/style.css';
	import '@uppy/dashboard/dist/style.css';
	import '@uppy/webcam/dist/style.css';

	const uppy = new Uppy().use(Webcam);
</script>

<template>
	<Dashboard :uppy="uppy" :plugins="['Webcam']" />
</template>
```

[vue]: https://vuejs.org