Laravel and Inertia create route inside Vue

Question

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.

Where is this { route } comming from? Seems to be undefined in this example, unless it's being defined at ./bootstrap. Are you using Ziggy? — Matheus Dal'Pizzol
– Matheus Dal'Pizzol, Commented May 24, 2021 at 18:06
Not sure really, I installed Laravel with Inertia and I got this — FosAvance
– FosAvance, Commented May 25, 2021 at 15:02
I have the same and it's not coming from bootstrap.js.. What kind of sorcery is this? — Tofandel
– Tofandel, Commented Dec 14, 2021 at 13:48

Solar · Accepted Answer · 2023-09-13 12:56:34Z

5

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();

edited Sep 13, 2023 at 12:56

answered May 27, 2021 at 10:15

Solar

1,03510 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bariq Dharmawan Over a year ago

Can't we rename the dashboard route name to admin.dashboard for example? Bcz when i try to change the dashboard route name, it still return error "route dashboard not found" even if i already change the route('dashboard') into route('admin.dashboard') in Welcome.vue

Solar Over a year ago

@BariqDharmawan 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().

Collectives™ on Stack Overflow

Laravel and Inertia create route inside Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related