Setting up a Laravel application with Inertia and Vue

Laravel, by far one of the most used PHP frameworks, is robust and easy to understand for developers. It follows a model-view-controller design pattern. Reusing the existing components of various frameworks, Laravel aids developers in building web applications relatively quickly. Moreover, laravel is a framework with an expressive and elegant syntax that ensures structured and pragmatic applications.


Check out a few of the Laravel benefits that make it a preferred framework. You can hire dedicated Laravel developers to harness the power of this framework;

  1. Faster Time-To-Market
  2. Better Authentication and Authorization Option5. Automated and Unit Testing 
  3. Automated Task Execution and Scheduling
  4. Traffic Handling
  5. MVC Architecture 
  6. Keep Technical Vulnerabilities at a bay

What is Inertia?

Inertia is a library that merges the best of server-side rendering and client-side rendering by helping developers to build single-page applications using server-side routing. It is a small library that allows you to render single-file Vue components from the Laravel backend. It does this by providing the element's name and the data that should be hydrated into that component's "props." The inertia stack is offered by Jetstream, which uses Vue.js as a templating language. Inertia helps solve a few common problems that Laravel developers encounter while building modern applications. 

  • Single-page application complexities
  • Building APIs
  • Browser history management and scroll 

Inertia is designed for developers who want to create monolithic systems and who also want to use cutting-edge client-side frameworks. It is for the people who typically appreciate the close coupling between their controllers and views.

You can construct single-page applications with Inertia.js without having to develop an API. Although it offers an adapter for these two frameworks, it is not confined to Laravel or Vue. Although Inertia does not rely on any specific technology, Laravel developers choose Inertia.js because of how close it is to that framework in terms of usage.

What is Vue?

Known as a 'progressive' framework, Vue.js is the most notable Javascript framework for building user interfaces. Vue.js, being very basic and simple, makes it feasible for developers to start small but build more extensive applications. 



Though JavaScript is best used for web development, Vue.js is applied for various proposes such as;

  • Prototyping
  • adding functionality to existing applications
  • Single-Page Applications (SPAs)
  • Native mobile applications
  • Progressive mobile applications
  • Creating React Native Code
  • Declarative Rendering

Demo URL Link:-  https://github.com/manektechgit/inertia-laravel-vue-app

Setup Laravel with Vue and Inertia

This is a quick tutorial for setting up your Laravel website with Vue and Inertia

1) Create New Laravel Project

composer create-project laravel/laravel example-app

cd example-app

php artisan serve

2)Setting Inertia for Server Side

composer require inertiajs/inertia-laravel

3) Create a new file on resources/views/app.blade.php

<!DOCTYPE html>

<html>

  <head>

    <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>

    @inertiaHead

  </head>

  <body>

    @inertia

  </body>

</html>

4) Setup Inertia Middleware

php artisan inertia:middleware

 5) Update your App\Http\Kernel.php

'web' => [

    // ...

    \App\Http\Middleware\HandleInertiaRequests::class,

],

6) Setup Client Side Inertia

npm install @inertiajs/inertia @inertiajs/inertia-vue3

// or 

yarn add @inertiajs/inertia @inertiajs/inertia-vue3

npm install @inertiajs/progress

// or 

yarn add @inertiajs/progress

npm install vue@next

7) Update resources/js/app.js

import { createApp, h } from 'vue'

import { createInertiaApp } from '@inertiajs/inertia-vue3'

import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

createInertiaApp({

  resolve: name => require(`./Pages/${name}`),

  setup({ el, App, props, plugin }) {

    createApp({ render: () => h(App, props) })

      .use(plugin)

      .mount(el)

  },

})

8) Update web.php

use Inertia\Inertia;

Route::get('/', function () {

   return Inertia::render("Home");

});

9) Create new file on resources/js/Pages/Home.vue

<template>

  <div>

    Welcome Home!

  </div>

</template>

10) Update webpack.mix.js

mix.js('resources/js/app.js', 'public/js')

.vue()

.postCss('resources/css/app.css', 'public/css', [

  //

]);

mix.webpackConfig({

  output: {

    chunkFilename: 'js/[name].js?id=[chunkhash]',

  }

});

11) Update webpack.mix.js

npm install && npm run dev

12) Run your app

php artisan serve

Ref- https://whateverittech.medium.com/setup-laravel-with-vue-and-inertia-a3d7c65543d5

Laravel is a potent tool with elegant syntax and extraordinary support for static front-end production for applications. Connecting Laravel backend and a JavaScript-based framework like Inertia as a front-end gives various benefits compared to using Laravel as a Full-stack environment. First, hire Laravel developers who are competent in using Inertia and Vue.js with Laravel. You can also reach out to the Laravel development services provider companies that can help you leverage the combination of these technologies. Then, use a robust framework like Laravel with Vue and a commanding solution like Inertia to have a Javascript-like full-stack SPA. 


About Author

Manektech Team

ManekTech Team

ManekTech is a well-known software development and IT consulting company, providing custom software, website, and mobile app development services. ManekTech has own content writing and development team who writes content on various and trending technology that it serves currently.

Areas we serve

USA

4100 NW Loop 410, Suite 200, San Antonio, Texas, USA 78229

UK

7 Artisan Place Harrow, HA3 5DS

India

4th Floor, Timber Point, Prahaladnagar Road, Ahmedabad, Gujarat - 380015

PREV
NEXT