The boilerplate ships with two routes that are only accessible to authenticated users: /dashboard and /profile.
The dashboard is the first page users see after they log in. This is where you can implement the business logic that makes your project unique.
<script setup>
import { Head } from '@inertiajs/vue3';
import PrimaryButton from "@/Components/PrimaryButton.vue";
import DashboardLayout from "@/Layouts/DashboardLayout.vue";
</script>
<template>
<Head title="Dashboard" />
<DashboardLayout>
<template #header>
<h2 class="font-semibold text-xl leading-tight">Dashboard</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-skin-secondary overflow-hidden shadow-sm sm:rounded-lg p-6">
<div class="text-skin-base font-bold mb-4">You're logged in!</div>
</div>
</div>
</div>
</DashboardLayout>
</template>
The profile page is where users can update their profile information.
<script setup>
import DeleteUserForm from './Partials/DeleteUserForm.vue';
import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
import { Head } from '@inertiajs/vue3';
import DashboardLayout from "@/Layouts/DashboardLayout.vue";
defineProps({
mustVerifyEmail: {
type: Boolean,
},
status: {
type: String,
},
});
</script>
<template>
<Head title="Profile" />
<DashboardLayout>
<template #header>
<h2 class="font-semibold text-xl leading-tight">Profile</h2>
</template>
<div class="py-12 text-skin-base">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<div class="p-4 sm:p-8 bg-skin-secondary shadow sm:rounded-lg">
<UpdateProfileInformationForm
:must-verify-email="mustVerifyEmail"
:status="status"
class="max-w-xl"
/>
</div>
<div class="p-4 sm:p-8 bg-skin-secondary shadow sm:rounded-lg">
<UpdatePasswordForm class="max-w-xl" />
</div>
<div class="p-4 sm:p-8 bg-skin-secondary shadow sm:rounded-lg">
<DeleteUserForm class="max-w-xl" />
</div>
</div>
</div>
</DashboardLayout>
</template>