Init

resources/js/Pages/Welcome.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3'
+import { useAuth } from '@/composables/useAuth'
+
+defineProps<{
+  appName: string
+}>()
+
+const { user, isAuthenticated, config } = useAuth()
+
+const logoutForm = useForm({})
+
+function logout() {
+  logoutForm.post('/logout')
+}
+</script>
+
+<template>
+  <UApp>
+    <div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
+      <header class="flex items-center justify-end gap-4 p-4">
+        <template v-if="isAuthenticated">
+          <span class="text-sm text-gray-600 dark:text-gray-400">
+            {{ user?.full_name }}
+          </span>
+          <UButton variant="outline" :loading="logoutForm.processing" @click="logout">
+            Logout
+          </UButton>
+        </template>
+        <template v-else>
+          <UButton to="/login" variant="ghost">
+            Login
+          </UButton>
+          <UButton v-if="config.features.registration" to="/register">
+            Register
+          </UButton>
+        </template>
+      </header>
+
+      <div class="flex-1 flex items-center justify-center">
+        <div class="text-center">
+          <h1 class="text-4xl font-bold text-gray-900 dark:text-white">
+            Welcome to {{ appName }}
+          </h1>
+          <p class="mt-4 text-gray-600 dark:text-gray-400">
+            Inertia.js with Vue and Nuxt UI is ready to go!
+          </p>
+          <div v-if="!isAuthenticated" class="mt-8 flex gap-4 justify-center">
+            <UButton to="/register">
+              Get Started
+            </UButton>
+            <UButton variant="outline">
+              Learn More
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UApp>
+</template>