Layouts, User Settings, Improvements

README.md

@@ -1,10 +1,10 @@
-# Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit
+# PrimeVue SPA & Laravel API Starter Kit
 
 ![Static Badge](<https://img.shields.io/badge/Vue.js%20-%20v3.5%20-%20rgb(66%20184%20131)>) ![Static Badge](<https://img.shields.io/badge/PrimeVue%20-%20v4%20-%20rgb(16%20185%20129)>) ![Static Badge](https://img.shields.io/badge/Tailwind%20CSS%20-%20v4%20-%20%230284c7)
 
 A [PrimeVue](https://primevue.org/) SPA starter kit meant for use with a [Laravel Breeze](https://github.com/laravel/breeze) API stack backend.
 
-An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https://github.com/connorabbas/laravel-inertia-primevue).
+An alternative to using the [Laravel & PrimeVue (Inertia.js) Starter Kit](https://github.com/connorabbas/laravel-primevue-starter-kit).
 
 ## Setup
 
@@ -21,7 +21,7 @@ An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https:
     SANCTUM_STATEFUL_DOMAINS="vue-spa.localhost"
     SESSION_DOMAIN="vue-spa.localhost"
     ```
-6. Setup additional routes and controllers for profile page in the Laravel API project:
+6. Setup additional routes and controllers for profile settings in the Laravel API project:
 
     ```
     php artisan make:controller ProfileController

package.json

@@ -1,38 +1,40 @@
 {
     "name": "primevue-breeze-spa",
-    "private": true,
     "version": "0.0.0",
+    "private": true,
     "type": "module",
     "scripts": {
-        "dev": "vite",
         "build": "vite build",
-        "preview": "vite preview",
-        "lint": "eslint ."
+        "dev": "vite",
+        "lint": "eslint .",
+        "preview": "vite preview"
     },
-    "devDependencies": {
-        "@eslint/js": "^9.18.0",
+    "dependencies": {
         "@primeuix/themes": "^1.0.0",
-        "@primevue/auto-import-resolver": "^4.2.5",
-        "@tailwindcss/vite": "^4.0.0",
-        "@typescript-eslint/eslint-plugin": "^8.19.1",
-        "@typescript-eslint/parser": "^8.19.1",
-        "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^12.2.0",
         "axios": "^1.7.2",
-        "eslint": "^9.18.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-vue": "^9.32.0",
+        "lucide-vue-next": "^0.487.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
-        "primeicons": "^7.0.0",
         "primevue": "^4.3.0",
-        "tailwindcss": "^4.0.0",
+        "tailwindcss": "^4.1.0",
         "tailwindcss-primeui": "^0.5.0",
-        "typescript": "^5.7.3",
         "typescript-eslint": "^8.19.1",
         "unplugin-vue-components": "^0.27.4",
-        "vite": "^6.0",
         "vue": "^3.5.0",
         "vue-router": "^4.4.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.18.0",
+        "@primevue/auto-import-resolver": "^4.2.5",
+        "@tailwindcss/vite": "^4.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.19.1",
+        "@typescript-eslint/parser": "^8.19.1",
+        "@vitejs/plugin-vue": "^5.0.5",
+        "eslint": "^9.18.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-vue": "^9.32.0",
+        "typescript": "^5.7.3",
+        "vite": "^6.2"
     }
-}
+}

src/App.vue

@@ -5,7 +5,7 @@ import { RouterView } from 'vue-router';
 <template>
     <!-- Use key to re-generate the page view component on each navigation :key="$route.path" -->
     <!-- Alteratively, use a watch() on each component to re-render dynamic data as needed -->
-    <Toast position="top-center" />
+    <Toast position="bottom-right" />
     <RouterView v-slot="{ Component }">
         <Suspense timeout="0">
             <template #default>

src/app.js

@@ -1,9 +1,8 @@
 import './assets/css/app.css';
 import './assets/css/tailwind.css';
 import 'nprogress/nprogress.css';
-import 'primeicons/primeicons.css';
 
-import { useDark } from '@vueuse/core';
+import { useColorMode } from '@vueuse/core';
 import customThemePreset from './theme/noir-preset';
 
 import { createApp } from 'vue';
@@ -20,9 +19,9 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 
 const app = createApp(App);
 const pinia = createPinia();
-const darkMode = useDark(); // set Light/Dark Mode
+const colorMode = useColorMode({ emitAuto: true });
 
-app.provide('darkMode', darkMode)
+app.provide('colorMode', colorMode)
     .use(pinia)
     .use(router)
     .use(PrimeVue, {

src/assets/css/app.css

@@ -11,4 +11,9 @@ body {
 #nprogress .bar {
     background: var(--p-primary-500) !important;
     z-index: 9999999 !important;
+}
+
+.lucide {
+    width: 16px;
+    height: 16px;
 }

src/components/DeleteUserModal.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '@/stores/auth';
+import { useAxiosForm } from '@/composables/useAxiosForm';
+import { useFlashMessage } from '@/composables/useFlashMessage.js';
+import InputErrors from '@/components/InputErrors.vue';
+
+const modalOpen = defineModel(false, {
+    type: Boolean,
+});
+
+const authStore = useAuthStore();
+const router = useRouter();
+const { setFlashMessage } = useFlashMessage();
+
+const passwordInput = useTemplateRef('password-input');
+
+const {
+    data: formData,
+    validationErrors,
+    processing: deleting,
+    del: submitForm,
+    reset: resetFormFields,
+} = useAxiosForm({
+    password: '',
+});
+const deleteAccount = () => {
+    submitForm('/profile', {
+        onSuccess: () => {
+            modalOpen.value = false;
+            authStore.user = null;
+            router.push({ name: 'login' }).then(() => {
+                setFlashMessage('success', 'Your account has been deleted.');
+            });
+        },
+        onError: () => passwordInput.value.$el.focus(),
+        onFinish: () => resetFormFields(),
+    });
+};
+
+function focusPasswordInput() {
+    passwordInput.value.$el.focus();
+}
+</script>
+
+<template>
+    <Dialog
+        v-model:visible="modalOpen"
+        position="center"
+        header="Are you sure you want to delete your account?"
+        :style="{ width: '40rem' }"
+        :draggable="false"
+        dismissableMask
+        modal
+        @show="focusPasswordInput"
+    >
+        <div class="mb-6">
+            <p class="m-0 text-muted-color">
+                Once your account is deleted, all of its resources and data
+                will be permanently deleted. Please enter your password to
+                confirm you would like to permanently delete your account.
+            </p>
+        </div>
+
+        <div class="flex flex-col gap-2">
+            <InputText
+                id="password"
+                ref="password-input"
+                v-model="formData.password"
+                :invalid="Boolean(validationErrors?.password)"
+                type="password"
+                placeholder="Password"
+                autocomplete="current-password"
+                autofocus
+                required
+                fluid
+                @keyup.enter="deleteAccount"
+            />
+            <InputErrors :errors="validationErrors?.password" />
+        </div>
+
+        <template #footer>
+            <Button
+                class="mr-2"
+                label="Cancel"
+                plain
+                text
+                @click="modalOpen = false"
+            />
+            <Button
+                :loading="deleting"
+                label="Delete Account"
+                severity="danger"
+                @click="deleteAccount"
+            />
+        </template>
+    </Dialog>
+</template>

src/components/PageTitleSection.vue

@@ -1,10 +1,16 @@
 <template>
     <section>
         <div class="flex items-end justify-between flex-wrap gap-2 md:gap-4">
-            <div>
-                <h1 class="font-bold text-2xl md:text-3xl leading-tight">
+            <div class="flex flex-col gap-2">
+                <h1 class="font-bold text-2xl leading-tight">
                     <slot name="title" />
                 </h1>
+                <div
+                    v-if="$slots.subTitle"
+                    class="text-muted-color"
+                >
+                    <slot name="subTitle" />
+                </div>
             </div>
             <div>
                 <div v-if="$slots.end">

src/components/SelectColorModeButton.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ref, watchEffect, inject } from 'vue';
+import { Sun, Moon, Monitor } from 'lucide-vue-next';
+
+const colorMode = inject('colorMode');
+const selectedColorMode = ref(colorMode.value);
+
+const options = [
+    { label: 'Light', value: 'light', icon: Sun },
+    { label: 'Dark', value: 'dark', icon: Moon },
+    { label: 'System', value: 'auto', icon: Monitor },
+];
+
+watchEffect(() => colorMode.value = selectedColorMode.value)
+</script>
+
+<template>
+    <SelectButton
+        v-model="selectedColorMode"
+        :options="options"
+        :allowEmpty="false"
+        optionLabel="label"
+        optionValue="value"
+    >
+        <template #option="{ option }">
+            <component :is="option.icon" /> {{ option.label }}
+        </template>
+    </SelectButton>
+</template>