feat: add pinia

app.vue

@@ -1,12 +1,28 @@
 <template>
   <div>
     <NuxtLayout>
-      <NuxtPage />
+        <NuxtPage />
     </NuxtLayout>
     <Toaster />
   </div>
 </template>
 
 <script setup lang="ts">
-  import Toaster from '@/components/ui/toast/Toaster.vue'
+import Toaster from "@/components/ui/toast/Toaster.vue";
+import { fetchUser } from "@/lib/fetchUser";
+import { useAuthStore } from "@/store/auth";
+import { ref, onMounted, watch } from "vue";
+
+const { user, setUser } = useAuthStore();
+
+onMounted(async () => {
+  console.log("mounted");
+  try {
+    const userData = await fetchUser();
+    setUser(userData);
+    console.log("fetched", user);
+  } catch (error) {
+    console.error(error);
+  }
+});
 </script>

components/Nav.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="w-full h-10 flex">
+    <NuxtLink
+      to="/"
+      class="text-white gap-1 font-semibold text-2xl pl-5 pt-2 flex flex-row items-center"
+      ><img
+        src="public/icon-green.png"
+        class="w-10 h-10"
+        alt=""
+      />Nuxt</NuxtLink
+    >
+    <NuxtLink
+      v-if="!isLoggedIn"
+      to="/login"
+      class="text-green-500 font-semibold text-2xl pr-5 pt-2 ml-auto"
+      >Login</NuxtLink
+    >
+    <p
+      v-if="isLoggedIn"
+      @click="logout"
+      class="text-green-500 font-semibold text-2xl pr-5 pt-2 ml-auto hover:cursor-pointer"
+    >
+      Logout
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { useAuthStore } from "@/store/auth";
+import { useToast } from "@/components/ui/toast/use-toast";
+
+const { toast } = useToast();
+const { user, setUser } = useAuthStore();
+const isLoggedIn = computed(() => user !== null);
+
+const logout = async () => {
+  try {
+    const res = await fetch("http://localhost:3000/api/logout", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+    });
+    if (res.ok) {
+      setUser(null);
+      navigateTo("/login");
+    } else {
+      toast({
+        title: "Error",
+        description: "Failed to logout",
+      });
+      console.error("Failed to logout");
+    }
+  } catch (error) {
+    console.error(error);
+    toast({
+      title: "Error",
+      description: "Failed to logout",
+    });
+    throw createError({
+      statusCode: 500,
+      message: "Failed to logout",
+    });
+  }
+};
+
+</script>

lib/fetchUser.ts

@@ -0,0 +1,21 @@
+
+export async function fetchUser() {
+  try {
+    const res = await fetch("http://localhost:3000/api/session", {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    if (res.status === 200) {
+      const data = await res.json();
+      console.log("fetchUser:", data.user)
+      return data.user
+    } else {
+      return null;
+    }
+  } catch (e) {
+    return null;
+  }
+}

lib/utils.ts

@@ -1,6 +1,7 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
+  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt', '@pinia/nuxt'],
   shadcn: {
     prefix: '',
     componentDir: './components/ui'

pages/index.vue

@@ -1,17 +1,7 @@
 <template>
   <div class="bg-gray-900 w-screen h-screen overflow-hidden p-3">
-    <div class="w-full h-10 flex">
-      <NuxtLink
-        to="/"
-        class="text-white gap-1 font-semibold text-2xl pl-5 pt-2 flex flex-row items-center"
-        ><img src="public/icon-green.png" class="w-10 h-10" alt="">Nuxt</NuxtLink
-      >
-      <NuxtLink
-        to="/login"
-        class="text-green-500 font-semibold text-2xl pr-5 pt-2 ml-auto"
-        >Login</NuxtLink
-      >
-    </div>
+    <Nav />
+    <h1 v-if="isLoggedIn" class="text-white text-3xl pt-8 pl-5 font-semibold">Welcome, <span class="text-green-500">{{ user.name }}</span>!</h1>
     <div class="w-full pt-16 flex flex-col gap-5 justify-center items-center">
       <h1 class="text-5xl text-white font-bold flex flex-row items-center"><img src="public/icon-green.png" class="w-20 h-20" alt="">Nuxt Starter</h1>
       <p class="text-xl text-white font-bold">
@@ -22,18 +12,30 @@
       </p>
     </div>
     <div class="w-full pt-10 flex flex-col gap-5 justify-center items-center">
-        <ToastButton class="text-white bg-green-500 hover:bg-green-600 p-2 rounded-md font-bold" name="Count +1" title="Count increased!" :description="`New count: ${count}`" @click="increment" />
-        <p class="text-white text-xl font-semibold">Count: {{ count }}</p>
+        <ToastButton class="text-white bg-green-600 hover:bg-green-700 p-2 rounded-md font-semibold" name="Count +1" title="Count increased!" @click="increment" />
+        <p class="text-white text-xl font-semibold flex flex-row gap-2">Count: <span class="text-green-500">{{ count }}</span></p>
     </div>
   </div>
 </template>
 
 <script setup >
 import { ref } from 'vue'
+import { useToast } from '@/components/ui/toast/use-toast'
+import { useAuthStore } from '@/store/auth'
+
+const { toast } = useToast();
+const { user, setUser } = useAuthStore();
+const isLoggedIn = computed(() => user !== null);
+
+onMounted(() => {
+  console.log("mounted");
+  console.log("user:", user);
+});
 
 const count = ref(0)
 const increment = () => {
   count.value++
   console.log(count.value)
 }
+
 </script>