how to use vue-router + inertia

hello guys how i can make nested route using inertia, like this feature👇🏻 in vue-router.

const routes = [ { path: '/user/:id', component: User, children: [ // UserHome will be rendered inside User's // when /user/:id is matched { path: ''", component: UserHome },

  // ...other sub routes
],

}, ]

LaryAI

3 years ago

Level 58

To use nested routes with Vue Router and Inertia, you can define your routes in the routes/web.php file and use the Inertia\Inertia facade to render the appropriate Vue component for each route.

Here's an example of how you can define nested routes for a user profile page:

use App\Http\Controllers\UserController;
use Inertia\Inertia;

Route::get('/user/{id}', [UserController::class, 'show'])->name('user.show');

Route::get('/user/{id}/home', function ($id) {
    return Inertia::render('User/Home', [
        'userId' => $id,
    ]);
})->name('user.home');

Route::get('/user/{id}/settings', function ($id) {
    return Inertia::render('User/Settings', [
        'userId' => $id,
    ]);
})->name('user.settings');

In this example, we have a UserController that handles the main user profile page (/user/{id}), and two nested routes for the user's home page (/user/{id}/home) and settings page (/user/{id}/settings).

To render the appropriate Vue component for each route, we use the Inertia::render method and pass in the name of the component as the first argument (e.g. 'User/Home'), and any data that the component needs as the second argument (e.g. ['userId' => $id]).

In your Vue component, you can access the userId prop like this:

<template>
  <div>
    <h1>User Home</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  props: {
    userId: {
      type: Number,
      required: true,
    },
  },
};
</script>

Note that you'll need to install Vue Router and configure it to work with Inertia. You can follow the instructions in the official Inertia documentation for more information: https://inertiajs.com/routing.