How to Setting up a Laravel appplication 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
Better Authentication and Authorization Option5. Automated and Unit Testing
Automated Task Execution and Scheduling
Traffic Handling
MVC Architecture
Keep Technical
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
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
example-app
artisan serve
2. Setting Inertia for Server Side composer require inertiajs/inertia-laravel
ManekTech(www.manektech.com)
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'
ManekTech(www.manektech.com)
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:
.use(plugin)
=> h(App, props)
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', [
output: {
'js/[name].js?id=[chunkhash]',
ManekTech(www.manektech.com)
11. Update webpack.mix.js npm install && npm run dev
12. Run your app php artisan serve
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.
With all right and permission here publish the blog of ManekTech.
Original post published here: https://www.manektech.com/blog/setting-up-a-laravel-application-with-inertia-and-vue
