Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

example: fix Vue3 example #3774

Merged
merged 5 commits into from Jun 29, 2022
Merged

example: fix Vue3 example #3774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bf88638
example: fix Vue3 example
aduh95 May 23, 2022
c9c6d81
add README
aduh95 May 31, 2022
8410f25
use tus instead of Transloadit to avoid the need for signatures
aduh95 Jun 27, 2022
68e3737
Update examples/vue3/README.md
aduh95 Jun 27, 2022
262c362
`yarn.lock`
aduh95 Jun 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions examples/vue3/README.md
View file
Open in desktop
@@ -0,0 +1,9 @@
# Vue 3 example

To run the example, from the root directory of this repo, run the following commands:

```sh
cp .env.example .env
corepack yarn install
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
corepack yarn workspace @uppy-example/vue3 dev
```
20 changes: 10 additions & 10 deletions examples/vue3/index.html
View file
Open in desktop
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
15 changes: 9 additions & 6 deletions examples/vue3/package.json
View file
Open in desktop
Expand Up @@ -4,17 +4,20 @@
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
"build": "vite build",
"preview": "vite preview --port 5050"
},
"dependencies": {
"@uppy/core": "workspace:*",
"@uppy/dashboard": "workspace:*",
"@uppy/drag-drop": "workspace:*",
"@uppy/progress-bar": "workspace:*",
"@uppy/tus": "workspace:*",
"@uppy/vue": "workspace:*",
"core-js": "^3.6.5",
"shallow-equal": "^1.2.1",
"vue": "^3.0.4"
"vue": "^3.2.33"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.4",
"vite": "^1.0.0-rc.13"
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.7.1"
}
}
40 changes: 20 additions & 20 deletions examples/vue3/src/App.vue
View file
Open in desktop
@@ -1,3 +1,7 @@
<script setup>
import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
</script>

<template>
<div id="app">
<!-- <HelloWorld msg="Welcome to Uppy Vue Demo"/> -->
Expand All @@ -13,7 +17,7 @@
/>
Show Dashboard
</label>
<dashboard
<Dashboard
v-if="showInlineDashboard"
:uppy="uppy"
:props="{
Expand All @@ -23,7 +27,7 @@
<h2>Modal Dashboard</h2>
<div>
<button @click="open = true">Show Dashboard</button>
<dashboard-modal
<DashboardModal
:uppy="uppy2"
:open="open"
:props="{
Expand All @@ -33,7 +37,7 @@
</div>

<h2>Drag Drop Area</h2>
<drag-drop
<DragDrop
:uppy="uppy"
:props="{
locale: {
Expand All @@ -46,7 +50,7 @@
/>

<h2>Progress Bar</h2>
<progress-bar
<ProgressBar
:uppy="uppy"
:props="{
hideAfterFinish: false
Expand All @@ -57,22 +61,19 @@

<script>
import Uppy from '@uppy/core'
// import Tus from '@uppy/tus'
import { Dashboard, DashboardModal, DragDrop, ProgressBar } from '@uppy/vue'
import Tus from '@uppy/tus'
import { defineComponent } from 'vue'

export default {
name: 'App',
components: {
Dashboard,
DashboardModal,
DragDrop,
ProgressBar
},
const {
VITE_TUS_ENDPOINT: TUS_ENDPOINT,
} = import.meta.env

export default defineComponent({
computed: {
uppy: () => new Uppy({ id: 'uppy1', autoProceed: true, debug: true }),
// .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }),
uppy: () => new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
.use(Tus, { endpoint: TUS_ENDPOINT }),
uppy2: () => new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
// .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }),
.use(Tus, { endpoint: TUS_ENDPOINT }),
},
data () {
return {
Expand All @@ -83,15 +84,14 @@ export default {
methods: {
handleClose() { this.open = false }
},

}
})
</script>

<style src='@uppy/core/dist/style.css'></style>
<style src='@uppy/dashboard/dist/style.css'></style>
<style src='@uppy/drag-drop/dist/style.css'></style>
<style src='@uppy/progress-bar/dist/style.css'></style>


<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
Expand Down
8 changes: 0 additions & 8 deletions examples/vue3/src/index.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion examples/vue3/src/main.js
View file
Open in desktop
@@ -1,5 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
7 changes: 7 additions & 0 deletions examples/vue3/vite.config.js
View file
Open in desktop
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})