DEV Community

Matheus Dal'Pizzol
Matheus Dal'Pizzol

Posted on • Edited on

Integrate Laravel and Inertia.js with a Vue CLI app

What is Inertia.js

Inertia.js was invented to integrate backend frameworks Like Laravel and Rails with modern frontend frameworks like React, Vue and Svelte and building SPAs without the need for a backend API nor a client-side router. I became a fan of the project and I'm using it with Vue.js.

Why do we need this tutorial though?

Now, if you blindly follow the instructions at Inertia's client-side setup page, you'll find that it only covers its installation with Code Splitting enabled using Laravel Mix. Although I'm a Jeffrey Way (the author of Laravel Mix) fan - I'm still subscribed at Laracasts, he's learning platform - and I understand the intent of Laravel Mix, my experience with it is that when it comes to advanced usage, you'll quickly find yourself wasting days (yes, I had that experience), fighting Webpack configurations and finding out that the problems come down to multiple outdated dependencies and stuff like that.

On the other hand, Vue CLI always made my life easier. I have absolutely nothing bad to say about it. Everything always works as expected (at least for me, at least until now).

So, I wanted to use Inertia.js with a Vue CLI app.

Heads up

Now, this article will be short and easy, but this is because we already did the heavy lifting in a previews article on how to integrate Laravel with a Vue CLI app with Hot Module Replacement. If you missed that, go ahead and follow that step by step until you get to the Routing section. Feel free to read that section there, if you want, but it's not a requirement for this tutorial.

Setting up the client-side

Install Inertia.js adapter for Vue.js:

cd resources
npm install @inertiajs/inertia @inertiajs/inertia-vue
cd ../
Enter fullscreen mode Exit fullscreen mode

Create a page component at resources/src/pages:

mkdir resources/src/pages
nano resources/src/pages/Home.vue
Enter fullscreen mode Exit fullscreen mode
// resources/src/pages/Home.vue

<template>
  <h1>Hello from Home</h1>
</template>

<script>
export default {}
</script>
Enter fullscreen mode Exit fullscreen mode

Edit your main.js file to use the Inertia App component and to load page components from the proper directory:

// resources/src/main.js

import Vue from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue'

Vue.config.productionTip = false

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => import('@/pages/' + name + '.vue').then(module => module.default)
    }
  })
}).$mount(el)
Enter fullscreen mode Exit fullscreen mode

Edit resources/src/template.blade.php replacing <div id="app"></div> with the @inertia Blade directive:

<!-- ... -->
<body>
  <!-- ... -->
  @inertia
  <!-- built files will be auto injected -->
</body>
Enter fullscreen mode Exit fullscreen mode

Setting up the server-side

Install Inertia's server side adapter:

composer require inertiajs/inertia-laravel
Enter fullscreen mode Exit fullscreen mode

Publish and register the Inertia middleware:

php artisan inertia:middleware
Enter fullscreen mode Exit fullscreen mode
// app/Http/Kernel.php

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],
Enter fullscreen mode Exit fullscreen mode

Create a configuration file for Inertia based on the contents of the config file on the official repo and set page_paths properly:

nano config/inertia.php
Enter fullscreen mode Exit fullscreen mode
// config/inertia.php

return [

    /*
    |--------------------------------------------------------------------------
    | Inertia
    |--------------------------------------------------------------------------
    |
    | The values described here are used to locate Inertia components on the
    | filesystem. For instance, when using `assertInertia`, the assertion
    | attempts to locate the component as a file relative to any of the
    | paths AND with any of the extensions specified here.
    |
    */

    'testing' => [      
        'ensure_pages_exist' => true,
        'page_paths' => [
            resource_path('src/pages'),
        ],
        'page_extensions' => [
            'js',
            'svelte',
            'ts',
            'vue',
        ],
    ],
];
Enter fullscreen mode Exit fullscreen mode

Setup a route and you're good to go

// routes/web.php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});
Enter fullscreen mode Exit fullscreen mode

And that's it!

Article repo

I've made a GitHub repo with all of this work done for you to clone and see things working for yourself.

DON'T FORGET TO CREATE YOUR resources/.env.local FILE AND SET THE VUE_APP_ASSET_URL ENVIRONMENT VARIABLE

Conclusion

As you can see, we're not locked up with Laravel Mix in order to use Inertia.js. With some efort we can use Inertia.js in conjunction with a Vue CLI app.

IMO, this is the best setup I've ever worked with in almost 14 years working with web development. What do you think? Hope you enjoy it as much as I do. Cheers!

Top comments (1)

Collapse
 
patriciooncode profile image
Patricio

I also find this is the most awesome setup ever!!
Funny, I also started in 2007 :D
All the best, thank you for this contribution!!