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;
- Faster Time-To-Market
- Better Authentication and Authorization Option5. Automated and Unit Testing
- Automated Task Execution and Scheduling
- Traffic Handling
- MVC Architecture
- 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.
Ruchir Pandya
Delivery Head of Web
Ruchir Pandya is a seasoned software and business professional with over 15 years of experience in IT, Software Development, and operations. As the overseer of the Open-Source Web department (PHP Department), he takes charge of development and operations.
Recent Blogs
Subscribe to Our Newsletter!
Join us to stay updated with our latest blog updates, marketing tips, service tips, trends, news and announcements!
