Add completed Vue tutorial

powersync-ja · Jun 3, 2024 · b9cbddb · b9cbddb
1 parent 1ddf356
commit b9cbddb
Show file tree

Hide file tree

Showing 30 changed files with 2,711 additions and 0 deletions.
diff --git a/demos/vue-supabase-todolist-completed-tutorial/README.md b/demos/vue-supabase-todolist-completed-tutorial/README.md
@@ -0,0 +1,25 @@
+# Finished Project Vue Tutorial: Building an Offline-First ToDo App with Supabase and PowerSync
+
+This is the finished project from the tutorial Building an Offline-First ToDo App with Supabase and PowerSync
+
+## Project setup
+
+```bash
+pnpm install
+```
+
+## Add Env Local Variables
+
+Create a `.env.local` file in the root of the project and add the following variables:
+
+```bash
+VITE_SUPABASE_URL=https://<your-supabase-url>.supabase.co
+VITE_SUPABASE_ANON_KEY=<your-supabase-anon-key>
+VITE_POWERSYNC_URL=https://<your-powersync-url>.journeyapps.com
+```
+
+## Run the project
+
+```bash
+pnpm run dev
+```
diff --git a/demos/vue-supabase-todolist-completed-tutorial/img/connection-string.avif b/demos/vue-supabase-todolist-completed-tutorial/img/connection-string.avif
diff --git a/demos/vue-supabase-todolist-completed-tutorial/img/create-instance.png b/demos/vue-supabase-todolist-completed-tutorial/img/create-instance.png
diff --git a/demos/vue-supabase-todolist-completed-tutorial/img/flow.png b/demos/vue-supabase-todolist-completed-tutorial/img/flow.png
diff --git a/demos/vue-supabase-todolist-completed-tutorial/img/remove-verify.png b/demos/vue-supabase-todolist-completed-tutorial/img/remove-verify.png
diff --git a/demos/vue-supabase-todolist-completed-tutorial/img/sync-rules.png b/demos/vue-supabase-todolist-completed-tutorial/img/sync-rules.png
diff --git a/demos/vue-supabase-todolist-completed-tutorial/index.html b/demos/vue-supabase-todolist-completed-tutorial/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/demos/vue-supabase-todolist-completed-tutorial/package.json b/demos/vue-supabase-todolist-completed-tutorial/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "vue-todo-powersync",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.22",
+    "@heroicons/vue": "^2.1.3",
+    "@journeyapps/wa-sqlite": "^0.2.0",
+    "@powersync/vue": "^0.1.4",
+    "@powersync/web": "^0.7.0",
+    "@supabase/supabase-js": "^2.43.2",
+    "js-logger": "^1.6.1",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vue-tsc": "^2.0.6"
+  }
+}