How to use Laravel 8 with VUE.JS, Inertia and Jetstream

If you are familiar with Laravel version 5,6 and 7, you might wonder that in version 8 there are some major changes. If you start a project from scratch in version 8, it can be a bit frustrating when you see all the new stuff, especially when you set up the new Auth system. In this article I want you to encourage to tackle the new stuff and looking forward with more knowledge and faster development.

Jetstream with Livewire or Inertia?

When you set up the new Authentication scaffold from Laravel 8 you have to decide between two Stacks: Livewire or Inertia. I decided to Inertia because it is based on Vue.js components for rendering the templates and I’m very familiar with Vue.

How to install Inertia?

First of all, you need to install the jetstream Package:

composer require laravel/jetstream

Now you have to decide between Livewire or Inertia. In this article I explain you the way with Inertia. Please type the following command into your CLI:

php artisan jetstream:install inertia

This command will create some stuff in the background and set up some npm dependencies. So after that you still have to install the dependencies create your js and css files:

npm install 

npm run dev 

After that don’t forget to setup your database and run the migration command:

php artisan migrate

Inertia and Jetstream is ready installed. Please go to your browser and try it out. If everything is fine, continue to make your own Inertia Page.

How to create my own Inertia SPA Page

Now you are ready to create some simple SPA pages! With Inertia you have a very powerful tool to create your SPA pages within seconds. You don’t need to mind about the AJAX requests and complicated Vue routes. In the next steps I will show you, how easy it is!

First, create a new Controller with the Inertia Package

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
// Don't forget the Intertia Package ;)
use Inertia\Inertia;

class FooController extends Controller
{

    public function index(Request $request)
    {
        return Inertia::render('MyComponent/Hello', [
           'bar' => "Hello World",
        ]);
    }
}

With Inertia you have to think almost the same like if you create a non SPA page with Laravel and Blade. In the above Controller example we’ve create a standard index method. At the end of the index method you return the Inertia::render() function with the exported data and the name of the Vue Component. You simply switch from return view()… to Inertia::render()!

Next you have to route your Controller. This step is also the same like to return a normal non SPA page. So. lets go:

Route::get('foo/hello', [\App\Http\Controllers\FooController::class, 'index'])->name('foo.index');

I think there is nothing to say. Everything is very common, expect that Laravel 8 have a new way to call the Controller and Action.
Now let’s create the component!

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Hello, place any Headline here!
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
               {{bar}}
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from './../../Layouts/AppLayout'
    export default {
        props: ['bar'],

        components: {
            AppLayout,
        },
    }
</script>

Place the component into the resources/js/MyCompontents folder and call the file Hello.vue. The returned “bar” variable from your controller is now available as a property in your component. Also don’t forget to import your layout theme.

In the last step, you have to compile your js files again. If you don’t use a watcher, just recompile your code again…

npm run dev 

… and your fist Inertia Page is ready. Type in the defined path from your router into your browser and “tada”, if you made everything right, you will see your created page!

If you wish additional informations about Inertia and Laravel, please leave a comment in my blog. Also visit the Interia and Jetstream page for more details!

One response to “How to use Laravel 8 with VUE.JS, Inertia and Jetstream”

1. ernest hemingway says:

   May 11, 2021 at 5:15 pm

   Thank you for your clear and informative post, But I have to mention here that after I followed the steps in this post, I faced with error in debugger that was saying Hello.vue file could not be found. I finally figured out that problem was that (maybe just for new laravel/jetstream and Inertia installations?) we should put Hello.vue file in resources/js/Pages/MyComponents folder otherwise Inertia won’t find it!!! Also in controller, a ‘s’ after MyComponent is missing, So we have:
   return Inertia::render(‘MyComponents/Hello’, …..

   Reply