CODEWITHSUNDEEP
laravelvue.jsinertiajs
FosAvance
FosAvance

Reputation: 2469

Laravel and Inertia create route inside Vue

I installed Laravel with Inertia. And I got this inside resources/js/app.js:

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .mixin(require('./translation'))
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

As you may see there is .mixin({ methods: { route } }). I can use this.route('name.of.route') to generate named route from ˙routes` folder.

I want to modify route method to add prefix by default every time route is generated. How do I adjust Inerta's route method.

Upvotes: 1

Views: 16162

Answers (1)

Solar
Solar

Reputation: 1015

With Inertia all routing is defined server-side. Meaning you don't need Vue Router or React Router. Simply create routes using your server-side framework of choice.

You can read more about it here (https://inertiajs.com/routing#top)

You've got all the routes available on your javascript installed because of ziggy library. It provides a JavaScript route() helper function that works like Laravel's, making it easy to use your Laravel named routes in JavaScript.

To modify or add prefix to the URL, you'll have to do it from the backend(Laravel) using Middleware or Route Groups, because Ziggy doesn't create URL, it just provides the URL that you define in your Laravel's web.php file in your Javascript.

That's why you have @routes in your root blade file. If you remove that, this.routes or this.$routes won't be available.

E.g.

Route::group(['prefix' => 'admin'], function () {
    Route::inertia('/dashboard', 'Dashboard')->name('admin.dashboard');
});

This means this URL will be available at /admin/dashboard and you can access it with Javascript as this.route('admin.dashboard');

Or read more on the Ziggy package to give you the desired result.

It is worth mentioning that you can name the route with anything you like. Just make sure that whatever you pass inside ->name('') is the same thing you use when calling this.route();

Upvotes: 5

Related Questions