Getting started with Inertia.js

TLDR; Getting started with Inertia.js

Posted by Fathima Hassana on 2021-Mar-16

What is Inertia.js

Inertia is a new approach to building classic server-driven web apps. Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity. And inertia has no client side routing, does not require an API also.

If we say simply, you create controllers, get the data from the database and render views.


Server-side setup

Install server-side adapter using composer

composer require inertiajs/inertia-laravel

Setup the root template

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>

@inertia directive is a helper that creates a root <div> with an id of app that contains the page information and it tells Laravel that the views are generated using Inertia.

Client-side setup

setup the client-side adapter using these commands:

npm install @inertiajs/inertia @inertiajs/inertia-vue


yarn add @inertiajs/inertia @inertiajs/inertia-vue

update the resources/js/app.js

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'


const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(,
      resolveComponent: name => require(`./Pages/${name}`).default,

Define the routes

For example:

I am going to discuss index view of users form and we can define the following route in web.php


Create a controller

class UsersController extends Controller
    public function index(Request $request): \Inertia\Response

        $users = User::when($request->get('search') ?? '', function ($query, $search) {
            $query->where('full_name', 'like', "%{$search}%");
            ->orderBy('id', 'ASC')
            ->only('id', 'full_name', 'email', 'phone', 'country', 'investor_type');

        return Inertia::render('Users/Index', ['users' => $users]);

We can create a controller using php artisan:make controller UsersController And render function is used for making inertia response. This function uses components and data.

Create a page(view) of index

After creating UsersController, we can create the index component under resources/js/Pages/Users. Assume the filename to be Index.vue, following code shows the contents of Index.vue

        <div class="container">
           <div class="col-6">
                <form @submit.prevent="search">
                    <div class="input-group mb-3">
                        <input type="text" v-model="q" class="form-control" placeholder="Search...">
                        <button class="btn btn-outline-secondary" type="submit" id="button-addon2">Search</button>
            <table class="table table-striped">
                <tr class="bg-gray-100">
                    <th scope="col">Id</th>
                    <th scope="col">Full Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Country</th>
                    <th scope="col">Investor Type</th>
                    <th scope="col">Actions</th>
                <tr v-for="user in" :key="">
                    <td>{{ }}</td>
                    <td>{{ user.full_name }}</td>
                    <td>{{ }}</td>
                    <td>{{ }}</td>
                    <td>{{ }}</td>
                    <td>{{ user.investor_type }}</td>

            <pagination :links="users.links" />


import Layout from "../../Shared/Layout";
import Pagination from "../../Shared/Pagination";

export default {
    components: { Layout,Pagination},
    props: {
        users: Object,
    data() {
        return {
            q: '',
            form: {
                full_name: null,
                email: null,
                phone: null,
                country: null,
                investor_type: null,
    mounted() {'Users');
    methods: {
        search() {

Create the layouts of page

In this example, I use Layout component that comes from resources/js/Shared/Layout.vue

        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>

            <div class="hidden md:block">
                <div class="ml-10 flex items-baseline space-x-4">
                  <inertia-link href="/users"
                                  class="bg-black-900 text-black-50 px-3 py-2 rounded-md text-sm font-medium">Users

export default {
    inject: ['page'],

That's all we have to do to create simple index view of users using inertia.js. If you want more information about inertia.js please refer the official documentation: