Table of Contents

    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

    Subscribe to Our Newsletter!

    Join us to stay updated with our latest blog updates, marketing tips, service tips, trends, news and announcements!

    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

    Germany

    Franz-Joseph-Strasse, 11,Munich, 80801, Germany

    PREV
    NEXT