Flycro/laravel-nuxt-ui-inertia-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add dashboard page with Nuxt UI components and verified middleware

Browse Source
This commit is contained in:
Flycro
2026-03-19 23:15:23 +01:00
parent a096704b0b
commit 4ea87c0cf7
6 changed files with 186 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
resources/js/Pages/Dashboard.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup lang="ts">
import { useAuth } from '@/composables/useAuth'
import DashboardLayout from '@/layouts/DashboardLayout.vue'
defineOptions({
layout: DashboardLayout,
})
const { user } = useAuth()
</script>
<template>
<UDashboardPanel>
<template #header>
<UDashboardNavbar title="Dashboard" />
</template>
<template #body>
<div class="flex flex-col gap-6">
<UCard>
<div class="flex items-center gap-4">
<UIcon name="i-lucide-shield-check" class="text-primary size-8" />
<div>
<h2 class="text-lg font-medium">
Welcome back, {{ user?.first_name }}!
</h2>
<p class="text-muted text-sm">
Your email is verified and you have access to this protected page.
</p>
</div>
</div>
</UCard>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<UCard>
<div class="flex items-center gap-3">
<UIcon name="i-lucide-lock" class="text-primary size-5" />
<div>
<p class="text-sm font-medium">
Auth Middleware
</p>
<p class="text-muted text-xs">
Route requires authentication
</p>
</div>
</div>
</UCard>
<UCard>
<div class="flex items-center gap-3">
<UIcon name="i-lucide-mail-check" class="text-primary size-5" />
<div>
<p class="text-sm font-medium">
Verified Middleware
</p>
<p class="text-muted text-xs">
Route requires email verification
</p>
</div>
</div>
</UCard>
<UCard>
<div class="flex items-center gap-3">
<UIcon name="i-lucide-layout-dashboard" class="text-primary size-5" />
<div>
<p class="text-sm font-medium">
Nuxt UI Dashboard
</p>
<p class="text-muted text-xs">
Built with dashboard components
</p>
</div>
</div>
</UCard>
</div>
<UCard>
<template #header>
<h3 class="font-medium">
Route Protection
</h3>
</template>
<div class="text-sm space-y-2">
<p class="text-muted">
This page is protected with both <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs">auth</code> and <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs">verified</code> middleware. Unauthenticated users are redirected to login, and unverified users are redirected to the email verification page.
</p>
<UAlert
icon="i-lucide-info"
color="info"
variant="subtle"
title="Enable email verification by setting AUTH_ENABLE_EMAIL_VERIFICATION=true in your .env file."
/>
</div>
</UCard>
</div>
</template>
</UDashboardPanel>
</template>

3
resources/js/Pages/Welcome.vue
View File

@@ -20,6 +20,9 @@ function logout() {
<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">
<UButton to="/dashboard" variant="ghost">
Dashboard
</UButton>
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ user?.full_name }}
</span>