based/momentum-preflight

Realtime backend-driven validation for Inertia-powered Laravel apps

v0.2.0 2023-04-11 01:40 UTC

Requires

• php: ^8.0
• illuminate/support: ^8.24|^9.0|^10.0
• inertiajs/inertia-laravel: ^0.6.3

Requires (Dev)

• laravel/pint: ^1.0
• nunomaduro/larastan: ^1.0|^2.0
• orchestra/testbench: ^6.9|^7.0|^8.0
• pestphp/pest: ^1.22|^2.0
• pestphp/pest-plugin-laravel: ^1.3|^2.0
• spatie/laravel-data: ^2.0

MIT

• Boris Lepikhin

README

Momentum Preflight is a Laravel package that lets you implement realtime backend-driven request validation for Inertia apps.

Validate form requests using Inertia form helper just like you already do, without running controllers' code.

• Advanced Inertia
• Installation
  • Laravel
  • Vue 3
• Usage
• Momentum

Installation

Laravel

Install the package into your Laravel app.

composer require based/momentum-preflight

Register the PreflightMiddleware middleware.

<?php

Route::post('register', RegisterController::class)
  ->middleware(PreflightMiddleware::class);

Vue 3

The frontend package is only for Vue 3 now due to its wide adoption within the Laravel community.

Install the frontend package.

npm i momentum-preflight
# or
yarn add momentum-preflight

Usage

Preflight works well with both FormRequests and Laravel Data. Due to the simplicity of the approach, it doesn't support the inline $request->validate(...) method.

<?php

class RegisterController
{
    public function __invoke(RegisterRequest $request)
    {
        ...
    }
}

import { useForm } from "inertia/inertia-vue3";
import { useValidate } from "momentum-preflight";

const form = useForm({ name: "" });

const validate = useValidate(form, "/register", { debounce: 500 });

watch(
  () => form.data(),
  () => validate()
);

The package performs validation for all defined rules. However, you can specify exact fields so that all errors don't appear together once you start typing.

<script setup>
import { useForm } from "inertia/inertia-vue3";
import { useValidate } from "momentum-preflight";

const form = useForm({ name: "" });

const validate = useValidate(form, "/register");
</script>

<template>
  <div>
    <input v-model="form.name" @blur="validate('name')" />

    <span v-if="form.errors.name">{{ form.errors.name }}</span>
  </div>
</template>

Advanced Inertia

Take your Inertia.js skills to the next level with my book Advanced Inertia. Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.

Momentum

Momentum is a set of packages designed to improve your experience building Inertia-powered apps.

• Modal — Build dynamic modal dialogs for Inertia apps
• Preflight — Realtime backend-driven validation for Inertia apps
• Paginator — Headless wrapper around Laravel Pagination
• Trail — Frontend package to use Laravel routes with Inertia
• Lock — Frontend package to use Laravel permissions with Inertia
• Layout — Persistent layouts for Vue 3 apps
• Vite Plugin Watch — Vite plugin to run shell commands on file changes

Credits

• Boris Lepikhin
• All Contributors

License

The MIT License (MIT). Please see License File for more information.