Catch up

eslint.config.js

@@ -1,31 +1,57 @@
-import prettier from 'eslint-config-prettier';
-import vue from 'eslint-plugin-vue';
-
-import {
-    defineConfigWithVueTs,
-    vueTsConfigs,
-} from '@vue/eslint-config-typescript';
-
-export default defineConfigWithVueTs(
-    vue.configs['flat/recommended'],
-    vueTsConfigs.recommended,
-    {
-        ignores: [
-            'vendor',
-            'node_modules',
-            'public',
-            'bootstrap/ssr',
-        ],
-    },
-    {
-        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',
-            '@typescript-eslint/no-explicit-any': 'off',
-        },
-    },
-    prettier
-);
+import vue from 'eslint-plugin-vue';
+import {
+    defineConfigWithVueTs,
+    vueTsConfigs,
+} from '@vue/eslint-config-typescript';
+import eslint from '@eslint/js';
+import globals from 'globals';
+
+export default [
+    // Global ignores
+    {
+        ignores: [
+            'node_modules',
+            'vendor',
+            'dist',
+            'public',
+            'bootstrap/ssr',
+        ],
+    },
+    // JavaScript files
+    {
+        files: ['**/*.js'],
+        ...eslint.configs.recommended,
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                process: 'readonly',
+                module: 'readonly',
+                require: 'readonly',
+                window: 'readonly',
+            },
+        },
+    },
+    // Vue and TypeScript files
+    ...defineConfigWithVueTs(
+        vue.configs['flat/recommended'],
+        vueTsConfigs.recommended,
+        {
+            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/no-v-html': 'off',
+                'vue/html-indent': ['error', 4],
+                '@typescript-eslint/no-explicit-any': 'off',
+                indent: ['error', 4],
+                semi: ['error', 'always'],
+                'linebreak-style': ['error', 'unix'],
+            },
+        }
+    ),
+];

package.json

@@ -4,7 +4,7 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "lint": "eslint ."
+        "lint": "eslint . --fix"
     },
     "devDependencies": {
         "@eslint/js": "^9.18.0",
@@ -28,7 +28,6 @@
         "@vueuse/core": "^13.0.0",
         "globals": "^16.0.0",
         "laravel-vite-plugin": "^1.2.0",
-        "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "lucide-vue-next": "^0.485.0",
         "primevue": "^4.3.3",

resources/js/app.js

@@ -15,10 +15,9 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 import customThemePreset from '@/theme/noir-preset';
 import { useColorMode } from '@vueuse/core';
 
+/* global Ziggy */
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
-
-// Set Light/Dark Color Mode
-const colorMode = useColorMode({ emitAuto: true });
+const colorMode = useColorMode({ emitAuto: true }); // Set Light/Dark Color Mode
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,

resources/js/components/SelectColorModeButton.vue

@@ -11,7 +11,7 @@ const options = [
     { label: 'System', value: 'auto', icon: Monitor },
 ];
 
-watchEffect(() => colorMode.value = selectedColorMode.value)
+watchEffect(() => colorMode.value = selectedColorMode.value);
 </script>
 
 <template>

resources/js/layouts/app/HeaderLayout.vue

@@ -112,7 +112,7 @@ const toggleMobileUserMenu = (event) => {
                                     <div
                                         id="user-menu-append"
                                         class="relative"
-                                    ></div>
+                                    />
                                     <Menu
                                         ref="user-menu"
                                         appendTo="#user-menu-append"

resources/js/pages/Dashboard.vue

@@ -8,7 +8,9 @@ import AppLayout from '@/layouts/AppLayout.vue';
 
         <Card>
             <template #content>
-                <p class="m-0">You are logged in!</p>
+                <p class="m-0">
+                    You are logged in!
+                </p>
             </template>
         </Card>
     </AppLayout>

resources/js/pages/auth/Login.vue

@@ -103,7 +103,7 @@ onMounted(() => {
                             v-model="loginForm.remember"
                             class="mr-2"
                             :binary="true"
-                        ></Checkbox>
+                        />
                         <label for="remember">Remember me</label>
                     </div>
                 </div>

resources/js/pages/settings/Appearance.vue

@@ -13,7 +13,9 @@ import SelectColorModeButton from '@/components/SelectColorModeButton.vue';
                 pt:body:class="max-w-2xl space-y-3"
                 pt:caption:class="space-y-1"
             >
-                <template #title>Appearance settings</template>
+                <template #title>
+                    Appearance settings
+                </template>
                 <template #subtitle>
                     Update your account's appearance settings
                 </template>

resources/js/pages/settings/Password.vue

@@ -63,7 +63,9 @@ const updatePassword = () => {
                 pt:body:class="max-w-2xl space-y-3"
                 pt:caption:class="space-y-1"
             >
-                <template #title>Update Password</template>
+                <template #title>
+                    Update Password
+                </template>
                 <template #subtitle>
                     Ensure your account is using a long, random password to stay secure
                 </template>

resources/js/pages/settings/Profile.vue

@@ -57,7 +57,9 @@ const updateProfileInformation = () => {
                     pt:body:class="max-w-2xl space-y-3"
                     pt:caption:class="space-y-1"
                 >
-                    <template #title>Profile Information</template>
+                    <template #title>
+                        Profile Information
+                    </template>
                     <template #subtitle>
                         Update your name and email address
                     </template>
@@ -138,7 +140,9 @@ const updateProfileInformation = () => {
                     pt:body:class="max-w-2xl space-y-3"
                     pt:caption:class="space-y-1"
                 >
-                    <template #title>Delete Account</template>
+                    <template #title>
+                        Delete Account
+                    </template>
                     <template #subtitle>
                         Delete your account and all of its resources
                     </template>
@@ -150,8 +154,12 @@ const updateProfileInformation = () => {
                         >
                             <div class="flex flex-col gap-4">
                                 <div>
-                                    <div class="text-lg">Warning</div>
-                                    <div class="">Please proceed with caution, this cannot be undone.</div>
+                                    <div class="text-lg">
+                                        Warning
+                                    </div>
+                                    <div>
+                                        Please proceed with caution, this cannot be undone.
+                                    </div>
                                 </div>
                                 <div>
                                     <Button

resources/js/types/global.d.ts

@@ -1,23 +1,23 @@
-import { PageProps as InertiaPageProps } from '@inertiajs/core';
-import { AxiosInstance } from 'axios';
-import { route as ziggyRoute } from 'ziggy-js';
-import { PageProps as AppPageProps } from './';
-
-declare global {
-    interface Window {
-        axios: AxiosInstance;
-    }
-
-    /* eslint-disable no-var */
-    var route: typeof ziggyRoute;
-}
-
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        route: typeof ziggyRoute;
-    }
-}
-
-declare module '@inertiajs/core' {
-    interface PageProps extends InertiaPageProps, AppPageProps {}
-}
+import { PageProps as InertiaPageProps } from '@inertiajs/core';
+import { AxiosInstance } from 'axios';
+import { route as ziggyRoute } from 'ziggy-js';
+import { PageProps as AppPageProps } from './';
+
+declare global {
+    interface Window {
+        axios: AxiosInstance;
+    }
+
+    /* eslint-disable no-var */
+    var route: typeof ziggyRoute;
+}
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        route: typeof ziggyRoute;
+    }
+}
+
+declare module '@inertiajs/core' {
+    interface PageProps extends InertiaPageProps, AppPageProps {}
+}

resources/js/types/index.d.ts

@@ -1,23 +1,23 @@
-import { DataTableFilterMetaData } from 'primevue';
-import { MenuItem } from 'primevue/menuitem';
-import type { LucideIcon } from 'lucide-vue-next';
-
-export interface User {
-    id: number;
-    name: string;
-    email: string;
-    email_verified_at?: string;
-}
-
-export type PageProps<
-    T extends Record<string, unknown> = Record<string, unknown>
-> = T;
-
-export type PrimeVueDataFilters = {
-    [key: string]: DataTableFilterMetaData;
-};
-
-export interface ExtendedMenuItem extends MenuItem {
-    route?: string;
-    lucideIcon?: LucideIcon;
-}
+import { DataTableFilterMetaData } from 'primevue';
+import { MenuItem } from 'primevue/menuitem';
+import type { LucideIcon } from 'lucide-vue-next';
+
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+    email_verified_at?: string;
+}
+
+export type PageProps<
+    T extends Record<string, unknown> = Record<string, unknown>
+> = T;
+
+export type PrimeVueDataFilters = {
+    [key: string]: DataTableFilterMetaData;
+};
+
+export interface ExtendedMenuItem extends MenuItem {
+    route?: string;
+    lucideIcon?: LucideIcon;
+}