How to customize component name used by Jetstream with Inertia in default routes?

Hi,

I'm customizing freshly installed Laravel 10 With Jetstream/Inertia.

What is the proper way of changing path to Vue components? I want to use Jetstream Controllers and routes, but I would like to change the path to the "page" in Vue (I want to have different components structure in Vue).

For example... let's say I want to change resources/js/Pages/Profile/Show.vue to resources/js/pages/profile/ProfileShowPage.vue:

default route is in here: vendor/laravel/jetstream/routes/inertia.php

        // User & Profile...
        Route::get('/user/profile', [UserProfileController::class, 'show'])
            ->name('profile.show');

default controller is here: vendor/laravel/jetstream/src/Http/Controllers/Inertia/UserProfileController.php

class UserProfileController extends Controller
{
    use Concerns\ConfirmsTwoFactorAuthentication;
    ( ... )
    public function show(Request $request)
    {
        $this->validateTwoFactorAuthenticationState($request);

        return Jetstream::inertia()->render($request, 'Profile/Show', [
            'confirmsTwoFactorAuthentication' => Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm'),
            'sessions' => $this->sessions($request)->all(),
        ]);
    }
( ... )

So essentially I would like to change 'Profile/Show' to profile/ProfileShowPage

I can disable Jetstream routes... and copy default ones to local routes folder... but the change I need to make is in Controller... so what is the proper way of achieving that (while still using the same logic)?

LaryAI

2 years ago

Level 58

To customize the component name used by Jetstream with Inertia without modifying the vendor files directly, you can follow these steps:

Publish Jetstream's Controllers: First, you need to publish the Jetstream controllers to your application so that you can modify them. You can do this by running the following Artisan command:

php artisan vendor:publish --tag=jetstream-controllers

This command will copy the Jetstream controllers to your app/Http/Controllers directory.

Modify the Controller: Next, locate the UserProfileController in your app/Http/Controllers directory (it should have been published there in the previous step). Update the show method to point to your new Vue component path:

// app/Http/Controllers/UserProfileController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;
use Laravel\Jetstream\Features;

class UserProfileController extends Controller
{
    // ...
    public function show(Request $request)
    {
        $this->validateTwoFactorAuthenticationState($request);

        return Jetstream::inertia()->render($request, 'profile/ProfileShowPage', [
            'confirmsTwoFactorAuthentication' => Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm'),
            'sessions' => $this->sessions($request)->all(),
        ]);
    }
    // ...
}

Update the Route: If you haven't already, you may need to disable the default Jetstream routes and define your own in the routes/web.php file. You can disable the default Jetstream routes by commenting out or removing the corresponding Jetstream::inertiaRoutes() call in your routes/web.php file.

Then, define your own route that uses your published controller:

// routes/web.php

use App\Http\Controllers\UserProfileController;

// ...

Route::get('/user/profile', [UserProfileController::class, 'show'])
    ->name('profile.show');

Move and Rename Vue Component: Finally, move your Vue component to the desired location and rename it accordingly. In your case, move Show.vue from resources/js/Pages/Profile to resources/js/pages/profile and rename it to ProfileShowPage.vue.
Update the Inertia Page Import: If you're using auto-discovery for Inertia pages (e.g., using require.context), make sure that the new path and component name are correctly resolved. If you're manually importing components, update the import paths where necessary.

After completing these steps, you should be able to use your custom component structure with Jetstream and Inertia while still leveraging the original logic provided by Jetstream. Remember to never modify the files directly in the vendor directory, as these changes will be lost when you update your dependencies.

Sqrcz

2 years ago

Level 5

Yes... that would be great way to do it... but unfortunately there is no way to publish Jetstream controllers anymore :/

After running this: php artisan vendor:publish --tag=jetstream-controllers I'm getting this message:

INFO No publishable resources for tag [jetstream-controllers].

So the question remains... how I can change Inertia paths hardcoded in Jetstream components?

gych

2 years ago

Level 29

You can't change any of the hardcoded paths, you have the actions that you can use for some customization but not to achieve what you're trying to do.

You will have to create a new controller that extends the default UserProfileController and add your custom show method in that controller.

Please or to participate in this conversation.