TS support, Github Actions, Cleanup & Improvements

.github/workflows/laravel.yml

@@ -0,0 +1,84 @@
+name: Laravel CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
+
+  laravel:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: shivammathur/setup-php@15c43e89cdef867065b0213be354c2841860869e
+      with:
+        php-version: '8.3'
+        extensions: mbstring, xml, ctype, iconv, intl, pdo_sqlite, dom, filter, json, libxml, zip
+
+    - name: Copy .env
+      run: php -r "file_exists('.env') || copy('.env.example', '.env');"
+
+    - name: Install PHP Dependencies
+      run: composer install --prefer-dist --no-progress --no-interaction
+
+    - name: Run Pint
+      run: vendor/bin/pint --test
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20'
+        cache: 'npm'
+
+    - name: Install Node Dependencies
+      run: npm ci
+
+    - name: Build Frontend Assets
+      run: npm run build
+
+    - name: Set Environment Variables
+      run: |
+        echo "APP_ENV=testing" >> .env
+        echo "DB_CONNECTION=sqlite" >> .env
+        echo "DB_DATABASE=database/database.sqlite" >> .env
+
+    - name: Generate Application Key
+      run: php artisan key:generate
+
+    - name: Prepare Database
+      run: |
+        mkdir -p database
+        touch database/database.sqlite
+
+    - name: Migrate Database
+      env:
+        DB_CONNECTION: sqlite
+        DB_DATABASE: database/database.sqlite
+      run: php artisan migrate:fresh --force
+
+    - name: Run Tests
+      env:
+        APP_ENV: testing
+        DB_CONNECTION: sqlite
+        DB_DATABASE: database/database.sqlite
+      run: php artisan test

.gitignore

@@ -16,6 +16,7 @@ Homestead.yaml
 auth.json
 npm-debug.log
 yarn-error.log
+components.d.ts
 /.fleet
 /.idea
 /.vscode

README.md

@@ -1,47 +1,55 @@
 # Laravel, Inertia.js, & PrimeVue Starter Kit
+
 ## About
-![Static Badge](https://img.shields.io/badge/Laravel%20-%20v11%20-%20%23f9322c) ![Static Badge](https://img.shields.io/badge/Inertia.js%20-%20v2%20-%20%236b46c1) ![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/Laravel%20-%20v11%20-%20%23f9322c) ![Static Badge](https://img.shields.io/badge/Inertia.js%20-%20v2%20-%20%236b46c1) ![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)>)
 
 A basic authentication starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), and [PrimeVue](https://primevue.org/). An equivalent to using [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze), but with the added benefit of all the PrimeVue components at your disposal.
 
 Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider using the [Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit](https://github.com/connorabbas/primevue-spa-laravel-api) instead.
 
 ## Features
-- Same auth structure and features as Laravel Breeze with User Profile page
-- Need an admin panel? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/admin-panel)
-- Need SSR support? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/ssr)
-- Pre-configured [Auto Import](https://primevue.org/autoimport/) PrimeVue components
-- Wrapper components for PrimeVue's `Menu`, `MenuBar`, & `PanelMenu` utilizing Inertia's `Link` component
-- Light/Dark mode toggle
-- `useLazyDataTable()` composable for use with PrimeVue's `DataTable` component for easy filtering/sorting (example usage in `feature/admin-panel` branch)
-- Easily customizable theming
+
+-   Same auth structure and features as Laravel Breeze with User Profile page
+-   Need an admin panel? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/admin-panel)
+-   Need SSR support? [There's a branch for that.](https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/ssr)
+-   Pre-configured [Auto Import](https://primevue.org/autoimport/) PrimeVue components
+-   Wrapper components for PrimeVue's `Breadcrumb`, `Menu`, `MenuBar`, & `PanelMenu` utilizing Inertia's `Link` component
+-   Light/Dark mode toggle
+-   `usePaginatedData()` & `useLazyDataTable()` composables for use with PrimeVue's `DataTable` component for easy pagination/filtering/sorting (example usage in `feature/admin-panel` branch)
+-   Easily customizable theming
+-   Configured to use TypeScript (not required)
 
 ## Theme
+
 This starter kit provides a light/dark mode toggle by default, and custom theme functionality provided by the powerful **PrimeVue V4** theming system, using styled mode and custom design token values.
 
 The starting point for customizing your theme will be the `resources/js/theme-preset.js` module file. To quickly change the look and feel of your site, swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors), change the [surface](https://primevue.org/theming/styled/#surface) `colorScheme` values (slate, gray, neutral, etc.), or completely change the [preset theme](https://primevue.org/theming/styled/#presets) (Aura used by default).
 
 Please reference the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/) to fully understand how this system works, and how to further customize your theme to make it your own.
 
 ## PrimeVue v4 w/ Tailwind CSS
+
 If you have used a previous version of this project using **PrimeVue V3**, you'll know that [PrimeFlex](https://primeflex.org/) was used instead of [Tailwind CSS](https://tailwindcss.com/) for utility class styling. With V4 however, the PrimeTek team has officially suggested [Moving from PrimeFlex to Tailwind CSS](https://primevue.org/guides/primeflex/).
 
 For this reason PrimeFlex has been removed, and Tailwind has been added into the project, along with the [tailwindcss-primeui](https://primevue.org/tailwind/#plugin) plugin. CSS layers have also been implemented so the Tailwind utilities can [override](https://primevue.org/tailwind/#override) the PrimeVue component styling when needed.
 
 ---
 
 ## Usage with Docker
+
 This starter kit is configured to use Docker Compose for local development with just a few extra steps, powered by images & configuration from [Laravel Sail](https://laravel.com/docs/master/sail). With this setup, you do not need PHP, Composer, PostgreSQL or Node.js installed on your machine to get up and running with this project.
 
 ### Setup
+
 1. In a new directory (outside of your Laravel project) create a `docker-compose.yml` file to create a reverse proxy container using [Traefik](https://doc.traefik.io/traefik/getting-started/quick-start/). You can clone/reference this [example implementation](https://github.com/connorabbas/traefik-docker-compose/blob/master/docker-compose.yml).
 
 2. Step into the directory containing the new compose file, and spin up the Traefik container:
     ```
     docker compose up -d
     ```
 3. Update Laravel app `.env`
+
     ```env
     # Use any desired domain ending with .localhost
     # Match with value used in docker-compose.local.yml
@@ -59,10 +67,12 @@ This starter kit is configured to use Docker Compose for local development with
     VITE_PORT=5173
     FORWARD_DB_PORT=5432
     ```
-3. Build the Laravel app container using one of the following techniques:
-   - Build manually using docker compose CLI (like above)
-   - Use [Laravel Sail](https://laravel.com/docs/master/sail)
-   - Build as a [VS Code Dev Container](https://code.visualstudio.com/docs/devcontainers/tutorial) using the `Dev Containers: Reopen in Container` command
+
+4. Build the Laravel app container using one of the following techniques:
+    - Build manually using docker compose CLI (like above)
+    - Use [Laravel Sail](https://laravel.com/docs/master/sail)
+    - Build as a [VS Code Dev Container](https://code.visualstudio.com/docs/devcontainers/tutorial) using the `Dev Containers: Reopen in Container` command
 
 ### Additional configuration
-If you wish to add additional services, or swap out PostgreSQL with an alternative database, you can reference the [Laravel Sail stubs](https://github.com/laravel/sail/tree/1.x/stubs) and update the `docker-compose.local.yml` file as needed.
+
+If you wish to add additional services, or swap out PostgreSQL with an alternative database, you can reference the [Laravel Sail stubs](https://github.com/laravel/sail/tree/1.x/stubs) and update the `docker-compose.local.yml` file as needed.

app/Http/Controllers/Auth/NewPasswordController.php

@@ -30,7 +30,7 @@ public function create(Request $request): Response
     /**
      * Handle an incoming new password request.
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     public function store(Request $request): RedirectResponse
     {

app/Http/Controllers/Auth/PasswordResetLinkController.php

@@ -25,7 +25,7 @@ public function create(): Response
     /**
      * Handle an incoming password reset link request.
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     public function store(Request $request): RedirectResponse
     {

app/Http/Requests/Auth/LoginRequest.php

@@ -35,7 +35,7 @@ public function rules(): array
     /**
      * Attempt to authenticate the request's credentials.
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     public function authenticate(): void
     {
@@ -55,7 +55,7 @@ public function authenticate(): void
     /**
      * Ensure the login request is not rate limited.
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     public function ensureIsNotRateLimited(): void
     {

bootstrap/app.php

@@ -12,8 +12,8 @@
     )
     ->withMiddleware(function (Middleware $middleware) {
         $middleware->web(append: [
-            \App\Http\Middleware\HandleInertiaRequests::class,
-            \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
+            App\Http\Middleware\HandleInertiaRequests::class,
+            Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
         ]);
 
         //

eslint.config.js

@@ -0,0 +1,56 @@
+// https://eslint.org/docs/latest/use/configure/
+// https://eslint.vuejs.org/user-guide/
+// https://typescript-eslint.io/rules/?=recommended
+
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import typescriptEslint from 'typescript-eslint';
+
+export default typescriptEslint.config(
+    { ignores: ['*.d.ts', '**/coverage', '**/dist', 'vendor/**', 'public/build/**'] },
+    {
+        files: ['**/*.js'],
+        ...eslint.configs.recommended,
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                process: 'readonly',
+                module: 'readonly',
+                require: 'readonly',
+                Ziggy: 'readonly',
+                window: 'readonly',
+            },
+        },
+    },
+    {
+        files: ['**/*.{ts,vue}'],
+        extends: [
+            eslint.configs.recommended,
+            ...typescriptEslint.configs.recommended,
+            ...eslintPluginVue.configs['flat/recommended'],
+        ],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            globals: {
+                ...globals.browser,
+                Ziggy: 'readonly',
+            },
+            sourceType: 'module',
+            parserOptions: {
+                parser: typescriptEslint.parser,
+            },
+        },
+        rules: {
+            'vue/require-default-prop': 'off',
+            'vue/attribute-hyphenation': 'off',
+            'vue/multi-word-component-names': 'off',
+            'vue/block-lang': 'off',
+            '@typescript-eslint/no-explicit-any': 'off',
+        },
+    },
+    eslintConfigPrettier
+);