mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 02:38:58 +00:00
73 lines
1.5 KiB
Text
73 lines
1.5 KiB
Text
---
|
|
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" />
|
|
</template>
|
|
```
|
|
|
|
[vue]: https://vuejs.org
|