Formatting

.devcontainer/devcontainer.json

@@ -25,7 +25,12 @@
                 "pmneo.tsimporter"
             ],
             "settings": {
-                "terminal.integrated.shell.linux": "/bin/sh"
+                "terminal.integrated.shell.linux": "/bin/sh",
+                "html.format.wrapAttributes": "force-expand-multiline",
+                "[vue]": {
+                    "editor.defaultFormatter": "Vue.volar",
+                    "editor.tabSize": 4
+                }
             }
         }
     },

eslint.config.js

@@ -30,7 +30,7 @@ export default typescriptEslint.config(
         extends: [
             eslint.configs.recommended,
             ...typescriptEslint.configs.recommended,
-            ...eslintPluginVue.configs['flat/recommended'],
+            ...eslintPluginVue.configs['flat/strongly-recommended'],
         ],
         languageOptions: {
             ecmaVersion: 'latest',
@@ -45,8 +45,16 @@ export default typescriptEslint.config(
         rules: {
             'vue/require-default-prop': 'off',
             'vue/attribute-hyphenation': 'off',
+            'vue/v-on-event-hyphenation': 'off',
             'vue/multi-word-component-names': 'off',
             'vue/block-lang': 'off',
+            'vue/first-attribute-linebreak': [
+                'error',
+                {
+                    singleline: 'ignore',
+                    multiline: 'ignore',
+                },
+            ],
             '@typescript-eslint/no-explicit-any': 'off',
         },
     },

src/components/InputErrors.vue

@@ -7,7 +7,10 @@ defineProps({
 </script>
 
 <template>
-    <div v-if="errors" class="space-y-1">
+    <div
+        v-if="errors"
+        class="space-y-1"
+    >
         <Message
             v-for="(errorMessage, index) in errors"
             :key="index"

src/components/PrimeVue/LinksPanelMenu.vue

@@ -1,20 +1,18 @@
 <template>
-    <PanelMenu
-        :pt="{
-            root: {
-                class: 'p-0 m-0 gap-1',
-            },
-            panel: {
-                class: 'p-0 border-0',
-            },
-            header: {
-                class: 'p-0 border-0',
-            },
-            itemContent: {
-                class: 'gap-1',
-            },
-        }"
-    >
+    <PanelMenu :pt="{
+        root: {
+            class: 'p-0 m-0 gap-1',
+        },
+        panel: {
+            class: 'p-0 border-0',
+        },
+        header: {
+            class: 'p-0 border-0',
+        },
+        itemContent: {
+            class: 'gap-1',
+        },
+    }">
         <template #item="{ item, active }">
             <RouterLink
                 v-if="item.route"

src/views/Welcome.vue

@@ -10,13 +10,11 @@ await authStore.fetchUser();
 <template>
     <main>
         <div class="h-screen flex items-center justify-center">
-            <Card
-                :pt="{
-                    body: {
-                        class: 'p-4 py-6 sm:p-12',
-                    },
-                }"
-            >
+            <Card :pt="{
+                body: {
+                    class: 'p-4 py-6 sm:p-12',
+                },
+            }">
                 <template #content>
                     <div class="text-center md:text-left">
                         <section>
@@ -27,17 +25,15 @@ await authStore.fetchUser();
                                 <a
                                     href="https://laravel.com/docs/master/starter-kits#laravel-breeze"
                                     class="underline text-primary hover:text-color"
-                                    >Laravel Breeze</a
-                                >
+                                >Laravel Breeze</a>
                                 authentication with the API stack,
                             </p>
                             <p class="mt-0 mb-6 text-muted-color leading-normal">
                                 Utilizing
                                 <a
                                     href="https://primevue.org/"
                                     class="underline text-primary hover:text-color"
-                                    >PrimeVue</a
-                                >
+                                >PrimeVue</a>
                                 components in a basic SPA
                             </p>
                             <template v-if="authStore?.user">

src/views/error/NotFound.vue

@@ -1,20 +1,17 @@
 <template>
     <main>
         <div class="h-screen flex items-center justify-center">
-            <Card
-                :pt="{
-                    body: {
-                        class: 'p-4 py-6 sm:p-12',
-                    },
-                }"
-            >
+            <Card :pt="{
+                body: {
+                    class: 'p-4 py-6 sm:p-12',
+                },
+            }">
                 <template #content>
                     <div class="text-center">
                         <section>
                             <h2 class="mb-8 font-extrabold text-9xl"> <span class="sr-only">Error</span>404 </h2>
-                            <p class="mb-8 text-2xl font-semibold md:text-3xl text-muted-color"
-                                >Sorry, we couldn't find this page.</p
-                            >
+                            <p class="mb-8 text-2xl font-semibold md:text-3xl text-muted-color">Sorry, we couldn't find
+                                this page.</p>
                             <RouterLink :to="{ name: 'welcome' }">
                                 <Button
                                     label="Back to homepage"

src/views/profile/Edit.vue

@@ -15,33 +15,29 @@ import UpdateProfileInformationForm from './partials/UpdateProfileInformationFor
         <Container>
             <div class="py-4 md:py-8">
                 <div class="space-y-4 md:space-y-8">
-                    <Card
-                        :pt="{
-                            body: {
-                                class: 'max-w-2xl space-y-3',
-                            },
-                            caption: {
-                                class: 'space-y-1',
-                            },
-                        }"
-                    >
+                    <Card :pt="{
+                        body: {
+                            class: 'max-w-2xl space-y-3',
+                        },
+                        caption: {
+                            class: 'space-y-1',
+                        },
+                    }">
                         <template #title>Profile Information</template>
                         <template #subtitle> Update your account's profile information and email address. </template>
                         <template #content>
                             <UpdateProfileInformationForm />
                         </template>
                     </Card>
 
-                    <Card
-                        :pt="{
-                            body: {
-                                class: 'max-w-2xl space-y-3',
-                            },
-                            caption: {
-                                class: 'space-y-1',
-                            },
-                        }"
-                    >
+                    <Card :pt="{
+                        body: {
+                            class: 'max-w-2xl space-y-3',
+                        },
+                        caption: {
+                            class: 'space-y-1',
+                        },
+                    }">
                         <template #title>Update Password</template>
                         <template #subtitle>
                             Ensure your account is using a long, random password to stay secure.
@@ -51,16 +47,14 @@ import UpdateProfileInformationForm from './partials/UpdateProfileInformationFor
                         </template>
                     </Card>
 
-                    <Card
-                        :pt="{
-                            body: {
-                                class: 'max-w-2xl space-y-3',
-                            },
-                            caption: {
-                                class: 'space-y-1',
-                            },
-                        }"
-                    >
+                    <Card :pt="{
+                        body: {
+                            class: 'max-w-2xl space-y-3',
+                        },
+                        caption: {
+                            class: 'space-y-1',
+                        },
+                    }">
                         <template #title>Delete Account</template>
                         <template #subtitle>
                             Once your account is deleted, all of its resources and data will be permanently deleted.