improve playground

.codesandbox/tasks.json

@@ -1,13 +1,9 @@
 {
-  // These tasks will run in order when initializing your CodeSandbox project.
-  "setupTasks": [
-    "pnpm install && cd playground && pnpm install"
-  ],
   // These tasks can be run from CodeSandbox. Running one will open a log in the app.
   "tasks": {
     "Start": {
       "name": "Start",
-      "command": "pnpm dev",
+      "command": "pnpm install && cd playground && pnpm install && pnpm dev",
       "runAtStart": true,
       "preview": {
         "port": 3000

playground/components/TheFooter.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="pb-4">
+    {{route.fullPath}}
+
     <UTable
       v-if="usersInDb"
       class="mt-12"
@@ -9,5 +11,10 @@
 </template>
 
 <script setup lang="ts">
-const { data: usersInDb } = await useAsyncData("usersInDb", () => $fetch("/api/users"));
+const { data: usersInDb, refresh } = await useAsyncData("usersInDb", () => $fetch("/api/users"));
+const route = useRoute();
+
+watch(() => route.fullPath, () => {
+  refresh();
+});
 </script>

playground/package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.0",
+    "@iconify-json/heroicons-solid": "^1.2.0",
     "@iconify-json/simple-icons": "^1.2.1",
     "drizzle-kit": "^0.24.2",
     "wrangler": "^3.79.0"

playground/pages/index.vue

@@ -61,6 +61,8 @@ async function handleSubmit() {
 
   if (data.value) {
     await fetchSession();
+    // triggernavifation
+    await navigateTo("/?auth=success");
   }
   else {
     alert(action + " failed");