chore: add vueuse util

src/router/index.ts

@@ -1,6 +1,5 @@
 import type { RouteRecordRaw } from "vue-router";
 import { createRouter, createWebHistory } from "@ionic/vue-router";
-import LayoutDefault from "@/components/layout/default.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -8,9 +7,8 @@ const routes: Array<RouteRecordRaw> = [
     redirect: "/layout/home",
   },
   {
-    path: "/layout/",
-    component: LayoutDefault,
-    redirect: "/layout/home",
+    path: "/layout",
+    component: () => import("@/components/layout/default.vue"),
     children: [
       {
         path: "home",

src/views/home/index.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
-import { ref } from "vue";
-import { authClient } from "@/auth";
-import ExploreContainer from "@/components/ExploreContainer.vue";
+import type { PageInstance } from "@/utils";
+import { modelControllerSignup } from "@/auth";
 
-const res = ref(null);
+const page = useTemplateRef<PageInstance>("page");
+const { user } = useAuth();
+
+async function openSignup() {
+  const modal = await modelControllerSignup(page.value?.$el);
+  await modal.present();
+}
 </script>
 
 <template>
-  <IonPage>
+  <IonPage ref="page">
     <IonHeader>
       <IonToolbar>
         <IonTitle>Home</IonTitle>
@@ -17,13 +21,15 @@ const res = ref(null);
     <IonContent :fullscreen="true">
       <IonHeader collapse="condense">
         <IonToolbar>
-          <IonTitle size="large">
-            Home
-          </IonTitle>
+          <IonTitle>Home</IonTitle>
         </IonToolbar>
       </IonHeader>
 
-      <ExploreContainer name="Home page" />
+      <IonButton @click="openSignup">
+        Signup
+      </IonButton>
+
+      {{ user }}
     </IonContent>
   </IonPage>
 </template>

src/views/market/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
-import ExploreContainer from "@/components/ExploreContainer.vue";
 </script>
 
 <template>
@@ -18,8 +16,6 @@ import ExploreContainer from "@/components/ExploreContainer.vue";
           </IonTitle>
         </IonToolbar>
       </IonHeader>
-
-      <ExploreContainer name="Market page" />
     </IonContent>
   </IonPage>
 </template>

src/views/user/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
-import ExploreContainer from "@/components/ExploreContainer.vue";
 </script>
 
 <template>
@@ -18,8 +16,6 @@ import ExploreContainer from "@/components/ExploreContainer.vue";
           </IonTitle>
         </IonToolbar>
       </IonHeader>
-
-      <ExploreContainer name="User page" />
     </IonContent>
   </IonPage>
 </template>