example: update Vue2 example (#3802)

transloadit · Jun 2, 2022 · 91e08c1 · 91e08c1
1 parent 861f264
commit 91e08c1
Show file tree

Hide file tree

Showing 10 changed files with 734 additions and 2,131 deletions.
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -1,21 +1,11 @@
-# uppy-vue
+# Vue 2 example
 
-## Project setup
+You’re browsing the documentation for Vue v2.x and earlier. Check out
+[Vue 3 example](../vue3/) for new projects.
 
-    npm install
+To run the example, from the root directory of this repo, run the following commands:
 
-### Compiles and hot-reloads for development
-
-    npm run serve
-
-### Compiles and minifies for production
-
-    npm run build
-
-### Lints and fixes files
-
-    npm run lint
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
+```sh
+corepack yarn install
+corepack yarn workspace @uppy-example/vue2 dev
+```
diff --git a/examples/vue/babel.config.js b/examples/vue/babel.config.js
diff --git a/examples/vue/index.html b/examples/vue/index.html
@@ -0,0 +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>
+</html>
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -1,26 +1,24 @@
 {
-  "name": "@uppy-example/vue-example",
+  "name": "@uppy-example/vue2",
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5050"
   },
   "dependencies": {
+    "@uppy/core": "workspace:*",
+    "@uppy/dashboard": "workspace:*",
+    "@uppy/drag-drop": "workspace:*",
+    "@uppy/progress-bar": "workspace:*",
+    "@uppy/transloadit": "workspace:*",
     "@uppy/vue": "workspace:*",
-    "core-js": "^3.6.5",
-    "shallow-equal": "^1.2.1",
     "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "vite": "^2.7.1",
+    "vite-plugin-vue2": "^2.0.1",
+    "vue-template-compiler": "^2.6.14"
+  }
 }
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <!-- <HelloWorld msg="Welcome to Uppy Vue Demo"/> -->
     <h1>Welcome to Uppy Vue Demo!</h1>
     <h2>Inline Dashboard</h2>
     <label>

diff --git a/examples/vue/src/components/HelloWorld.vue b/examples/vue/src/components/HelloWorld.vue
diff --git a/examples/vue/vite.config.js b/examples/vue/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [createVuePlugin()],
+})
diff --git a/package.json b/package.json
@@ -121,7 +121,8 @@
     "temp-write": "^5.0.0",
     "tsd": "^0.17.0",
     "typescript": "~4.4",
-    "verdaccio": "^5.1.1"
+    "verdaccio": "^5.1.1",
+    "vue-template-compiler": "workspace:*"
   },
   "scripts": {
     "build:bundle": "yarn node ./bin/build-bundle.mjs",

diff --git a/private/vue-template-compiler/package.json b/private/vue-template-compiler/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "vue-template-compiler",
+    "version": "0.0.1",
+    "private": true,
+    "description": "This package is there only to avoid a version conflict in the Vue2 example."
+}