Laravel with Inertia and Vue.js

Let's learn how to use inertia in Laravel and vue.js

What is inertia

Inertia is not a framework or replacement of existing server-side or client-side frameworks. Inertia is designed to work as a bridge for the backend and frontend framework. Currently, inertia supports three client-side frameworks, React, Vue, and Svelte, and two server-side frameworks, Laravel and Rails.

Why Inertia

If we want to use Laravel as a server-side framework and Vue as a client-side framework we need to do a lot. First, we need to install Vue, then create Vue router for the client-side, then create API for client-side data render, and the list go on. We can’t use Laravel routes on the client-side. Here Inertia makes it easy for us. Intertia connects the server-side and client-side frameworks for us. We can use Vue components on our project and access them on the Laravel controller without creating API or making any API requests.

Let’s see how can we use it on our project.

First, install a fresh Laravel application.

composer create-project laravel/laravel appName

Then install a starter kit Breeze or Jetstream. If you are new in Laravel I recommend Laravel Breeze. Use these commands to install Laravel Breeze.

composer require laravel/breeze

php artisan breeze:install vue

php artisan migrate

npm install

npm run dev

Now you are good to use Inertia. As we already enable vue in our project. Now run this command to install Inertia on your project.

composer require inertiajs/inertia-laravel

Now, you can use Vue js functionality in your Laravel project without worrying about the client-side router. You can render vue components from Laravel Controller like returning blade view

return Inertia::render('Event/Show');

If you want to customize your app layout. Put your custom code on the app.blade.php file then place this code on the head tag.

  @routes
  @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
  @inertiaHead

And add this code between the body tag. Specifically where the Vue component will appear.

 @inertia

The last thing, you need to add this code on every vue component in order to use Laravel route

<script setup>
import { Head, Link } from '@inertiajs/inertia-vue3';
</script>

then you can access the Laravel route with this

<Link :href="route('dashboard')" class="btn btn-primary">Link</Link>