mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-19 01:24:18 +00:00
53cb32f5d9
| Package | Version | Package | Version | | ---------------------- | ------------ | ---------------------- | ------------ | | @uppy/companion | 5.0.0-beta.6 | @uppy/status-bar | 4.0.0-beta.7 | | @uppy/companion-client | 4.0.0-beta.6 | @uppy/unsplash | 4.0.0-beta.6 | | @uppy/compressor | 2.0.0-beta.7 | @uppy/url | 4.0.0-beta.6 | | @uppy/core | 4.0.0-beta.7 | @uppy/utils | 6.0.0-beta.6 | | @uppy/dashboard | 4.0.0-beta.7 | @uppy/webcam | 4.0.0-beta.6 | | @uppy/dropbox | 4.0.0-beta.6 | @uppy/xhr-upload | 4.0.0-beta.4 | | @uppy/image-editor | 3.0.0-beta.4 | uppy | 4.0.0-beta.7 | | @uppy/screen-capture | 4.0.0-beta.5 | | | - @uppy/companion: switch from `node-redis` to `ioredis` (Dominik Schmidt / #4623) - meta: Fix headings in xhr.mdx (Merlijn Vos) - @uppy/xhr-upload: introduce hooks similar to tus (Merlijn Vos / #5094) - @uppy/core: close->destroy, clearUploadedFiles->clear (Merlijn Vos / #5154) - @uppy/companion-client,@uppy/dropbox,@uppy/screen-capture,@uppy/unsplash,@uppy/url,@uppy/webcam: Use `title` consistently from locales (Merlijn Vos / #5134) | Package | Version | Package | Version | | ------------------ | ------- | ------------------ | ------- | | @uppy/core | 3.11.3 | uppy | 3.25.3 | | @uppy/image-editor | 2.4.6 | | | - @uppy/image-editor: fix tooltips (Avneet Singh Malhotra / #5156) - meta: Remove redundant `plugins` prop from examples (Merlijn Vos / #5145) - @uppy/image-editor: Remove `target` option from examples and document consistently (Merlijn Vos / #5146) - @uppy/core: make getObjectOfFilesPerState more efficient (Merlijn Vos / #5155)
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
|