momentum-preflight icon indicating copy to clipboard operation
momentum-preflight copied to clipboard

Momentum Preflight

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

License

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