pagina de listas

src/pages/ListasPage.vue

@@ -1,16 +1,41 @@
 <template>
-  <div class="flex flex-center">
-    <h1>
+  <div class="flex flex-center bg-teal-7 q-ma-md" @click="irPerfil()">
+    <h1 style="font-weight: 415">
       {{ listaStore.pb.authStore.model.username }}
     </h1>
   </div>
-  <q-page class="flex flex-center">
-    <div>Página de listas</div>
-  </q-page>
+  <div class="flex flex-center q-pt-xl q-mt-xl">
+    <div
+      class="full-width text-center q-px-md"
+      v-for="lista in listas"
+      :key="lista.id"
+    >
+      <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6">
+        {{ lista.nombre }}
+      </p>
+    </div>
+  </div>
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useListaStore } from "../stores/lista.js";
+import { useRouter } from "vue-router";
 
+const $router = useRouter();
 const listaStore = useListaStore();
+
+const listas = ref(null);
+
+const listListas = async () => {
+  listas.value = await listaStore.pb.collection("lista").getFullList({
+    sort: "-created",
+  });
+};
+
+const irPerfil = () => {
+  $router.push("perfil");
+};
+onMounted(() => {
+  listListas();
+});
 </script>

src/router/routes.js

@@ -8,6 +8,11 @@ const routes = [
         component: () => import("pages/ListasPage.vue"),
         meta: { auth: true },
       },
+      {
+        path: "perfil",
+        component: () => import("pages/IndexPage.vue"),
+        meta: { auth: true },
+      },
     ],
   },
   {