Laravel Question posted in
The official Laravel Documentation can be found here.

Passing properties to an Inertia Vue page for Laravel Fortify's register view

I’m working on a web app that’s using Laravel 10, Vue 3, and Inertia. (I’m new to all of these, btw) Laravel is using Fortify for a lot of features, including new user registration. I’ve been tasked with changing the registration page to display some things from the database. As far as I can tell, the usual approach to this would be to add some properties on the Vue page, and then populate those properties via Inertia somewhere in the Laravel app (e.g. a controller).

The challenge I’m encountering right now is that Fortify currently sets up the "register" view (implemented in the Jetstream service provider; see https://github.com/laravel/jetstream/blob/4.x/src/JetstreamServiceProvider.php#L210), pointing to the Auth/Register Vue page, but provides no way to add properties to the Inertia rendering (as far as I can tell).

So the questions are:

  • Is there a way to add properties in the existing configuration of Laravel, Fortify, Inertia, and Vue?
  • Can I safely just call Fortify::registerView() from a new service provider I make? Or will this cause some sort of conflict issue with the existing implementation done by the framework?
  • Do I have to (or would it be better to) extend something to override this default behavior? (I know Laravel allows me to extend a binding… https://laravel.com/docs/10.x/container#extending-bindings)
  • Would it be better to approach this from a completely different angle? Such as leaving the page as-is on the backend, and then setting up the page in Vue to make a subsequent request to fetch the necessary data from the database?
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    tl;dr: I can make my own call to Fortify::registerView() in appProvidersJetstreamServiceProvider without issue.

    I originally took the approach of making a subsequent ajax call using axios to fetch the necessary data for the Register page. However, I was tasked with adding yet another dynamic part to the Registration page, and I didn't want to have a pattern of making a bunch of ajax calls to populate portions of the page. With the help of Copilot, I found that I can make my own call to Fortify::registerView() in appProvidersJetstreamServiceProvider and it will not conflict with the default implementation (linked to in my original question). In my case, my implementation looks like this (only including the applicable parts):

    namespace AppProviders;

use AppModelsPlan;
use IlluminateSupportServiceProvider;
use InertiaInertia;
use LaravelFortifyFortify;

class JetstreamServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Fortify::registerView(function () {
            $plans = Plan::where('status', 1)->get();

            return Inertia::render('Auth/Register', [
                'plans' => $plans,
            ]);
        });
    }
}

  2. 0

    Beginners should not jump straight into the Jetstream Inertia stack.

    Start with the Breeze Blade stack.

    HandleInertiaRequests middleware provides a way to pass shared data.

    You can modify resources/js/Pages/Auth/Register.vue and app/Actions/Fortify/CreateNewUser.php copied to your project as you like.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search