Add Vue 3 example

CrazyTim · Dec 27, 2023 · 9d98bc1 · 9d98bc1
1 parent 8b24b32
commit 9d98bc1
Show file tree

Hide file tree

Showing 15 changed files with 1,786 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -80,8 +80,9 @@ If precision is not important, you can use `Wheel.spin()` to immediately start s
 
 ## Examples
 
-- [Basic ESM usage](https://crazytim.github.io/spin-wheel/examples/esm)
-- [Basic IIFE usage](https://crazytim.github.io/spin-wheel/examples/iife)
+- [Basic ESM](https://crazytim.github.io/spin-wheel/examples/esm)
+- [Basic IIFE](https://crazytim.github.io/spin-wheel/examples/iife)
+- [Basic Vue3/Vite](https://crazytim.github.io/spin-wheel/examples/vue3/dist)
 - [Spin to a specific item](https://crazytim.github.io/spin-wheel/examples/spin-to-item)
 - [Themes](https://crazytim.github.io/spin-wheel/examples/themes)
 - [Developer playground (for testing and troubleshooting)](https://crazytim.github.io/spin-wheel/examples/playground)

diff --git a/examples/vue3/.gitignore b/examples/vue3/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/examples/vue3/README.md b/examples/vue3/README.md
@@ -0,0 +1,13 @@
+# spin-wheel-example-vue
+
+This example was scaffolded using `npm create vue@latest`.
+
+```sh
+npm install
+
+# Compile and Hot-Reload for Development
+npm run dev
+
+# Compile and Minify for Production
+npm run build
+```
diff --git a/examples/vue3/dist/assets/index-omd7kyeh.css b/examples/vue3/dist/assets/index-omd7kyeh.css
@@ -0,0 +1 @@
+html,body{margin:0}div[data-v-ea7ed219]{width:60vw;height:60vh;margin:auto}
diff --git a/examples/vue3/dist/assets/index-tSGuP98j.js b/examples/vue3/dist/assets/index-tSGuP98j.js
diff --git a/examples/vue3/dist/index.html b/examples/vue3/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Spin Wheel Example - Vue 3</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="icon" href="data:image/x-icon;," type="image/x-icon">
+    <script type="module" crossorigin src="/spin-wheel/examples/vue3/dist/assets/index-tSGuP98j.js"></script>
+    <link rel="stylesheet" crossorigin href="/spin-wheel/examples/vue3/dist/assets/index-omd7kyeh.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/vue3/index.html b/examples/vue3/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Spin Wheel Example - Vue 3</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="icon" href="data:image/x-icon;," type="image/x-icon">
+    <script type="module" src="/src/main.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/vue3/jsconfig.json b/examples/vue3/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		html,body{margin:0}div[data-v-ea7ed219]{width:60vw;height:60vh;margin:auto}