Here, at Origami Marketplace, we are big fans of Laravel. Whether it’s to build an API or a full-stack web application, this PHP framework works on all fronts.

With the release of its 8th version at the end of 2020, Laravel has enriched its ecosystem with Jetstream, a starter kit that allows you to set up solid foundations for a web application very quickly.

It’s based on Laravel for the back-end – of course – and leaves us the choice regarding the front-end: using Blade (Laravel’s reference template engine) or Vue.js, in combination with Inertia. “Wait a second Antoine”, you might say (yes, you can call me by my first name, no problem 😉 ) ; “Vue.js, I’ve heard of it, it’s a JS framework that looks like React ! But what is Inertia?

Iner-what?

Very good question, dear padawan. Inertia, unlike Laravel or Vue, is not a framework. It is not intended to replace either of them in an application, but rather to link the two.

When we use JS frameworks like Vue or React, it is usually to make what we call SPA (Single Page Application), which offer more advantages than a classic template engine with a bit of javascript. But apart from the fact that this type of application requires more control, it also often needs an API to provide it with data, enable basic functionality such as authentication, etc. This is where Laravel – for example – can help coding this famous API.
Inertia offers itself as an alternative, easier to set up (especially now that it is officially integrated into the Laravel ecosystem with Jetstream) and allowing to link a backend framework and a js framework in the same full-stack application.
I use Laravel and Vue as examples, but you should know that Inertia also works with Rails (Ruby) on the back side and React and Svelte on the front side.

Okay, but what is it exactly?

All right, I’ll stop beating around the bush. Let’s go back to the example of Laravel and Vue. In the context of a full-stack application with Laravel, we would have something like this:

Note the use of the “view” function which suggests the use of Blade templates as views of the application. Now, let’s imagine that we want to go to the next level for our front-end and replace Blade with a js framework that allows us to make SPAs, I don’t know… Well, Vue for example!
It’s not like it’s done in two or three clicks… Well yes, thanks to Inertia !

Once Inertia is in place on your project (see below), the previous piece of code becomes :

And that’s it! No need for an intermediary between Laravel and Vue, we go directly from the controller to the component. The items in the list above will be passed directly as properties of the component we specified, which ensures an extremely smooth data transfer. Easy, isn’t it?

Ah, nice! And… that’s it?

No, that’s not it. Although this is already quite a lot! Inertia has a nice range of features, which would be too long to detail here. So I’ll refer you to the documentation, but I’ll still take the time to show you a few cool things.

Accessing routes defined by Laravel in Vue

To define the target of a link or the action of a form, we often tend to put the url on the front side:

Obviously, this has several drawbacks: risk of error, sometimes hardly readable and especially the obligation to change all these urls by hand when making a modification on the backend.

To remedy all this, a helper is globally defined to access the Laravel routes.

You can Note the use of a Link component instead of a more traditional <a>. This is what allows Inertia to avoid a complete reload of the page to have a SPA behaviour. More information here!

Simplified forms

Inertia offers a simplified way to manage your forms:

Using the Vue v-model directive keeps the data in this.form up to date with the content of the input elements.
You can find all the methods available on the form object here. Beware, the way to initialize the form is different in the official documentation. Personally, I have a preference for this one, which I find more intuitive. It’s up to you!
A little advice, which is not only valid for forms: don’t hesitate to browse through the components provided by Jetstream, you can learn a lot.

A quick way to access

A recurring problem when doing SPA is having access to the element to put a meta-description or title, for example. Indeed, these applications are generated in , so is out of their reach.
There are libraries to overcome this, but why bother? Inertia provides a simple solution, a component in which you can put whatever you want:

Again, I recommend the official documentation to go further!

And is it easy to install, your stuff?

If you’re a nice person and you’re going with Laravel for the back end and Vue for the front end, yeah, it’s pretty simple. Especially if you use Jetstream, which can really be installed in two or three terminal clicks if you already have a Laravel-ready environment. If you don’t already have it, you will also need to add npm to compile the Vue.
Be aware, however, that the Jetstream documentation does specify that it is a starter-kit, and therefore not meant to be installed on an existing project.

If you want to install Inertia on an existing project, check out their documentation instead.
As a bonus, we can also mention another starter-kit from the Laravel ecosystem, Breeze. It has the merit of being lighter, and therefore allows to go in more different directions. It also works with Inertia.
For the others at the back of the class who don’t get it (I’m kidding) and who use another technology stack, Inertia has official adapters with Ruby on Rails on the server side and with React and Svelte on the client side.
In addition, there are community-maintained adapters which you can find listed here.
And finally, if you want to have a demo and/or code examples, this is the place to go!

And you, how did you use it?

“It’s great to give advice, but do you use it in production?” As I write this, technically no. But it will be soon!
At Origami Marketplace, we took advantage of the summer to build an internal tool, allowing us to have more visibility on the infrastructures and services provided to our customers. What do you want, we like to keep an eye on them, to take care of them.

In short, this tool takes the form of a back-office with several pages containing information that we look for in different places. One of our developers had started a project in Laravel some time ago, so we dusted it off and got started.
The front end was using Blade and Jquery combined with a library called Turbolink, which had the function of simulating the operation of an SPA to make navigation smoother. When we took the project out of the attic, time had passed. At first we wanted to include Vue components to make life a little easier, but it started to get pretty messy with the technologies already there.

After some proper scalps were ruined, as the front was not very advanced, we decided to start from scratch. We started from Jetstream (Vue + Inertia), we recovered what we wanted to keep from the Laravel backend of the other project and we started the frontend from scratch.
Quite a breath of fresh air, if you ask me! A quick transition (one or two days, the time to create a new Git repo, install, dockerize and sort out what we wanted to keep), and a development greatly facilitated by the presence of Inertia and Vue.

That sounds great, Inertia!

What do you mean, “sounds great“!? Where were you for the last six paragraphs?
It’s well worth the trouble of writing articles…

See you next time!