{"id":1137,"date":"2022-07-08T10:28:33","date_gmt":"2022-07-08T10:28:33","guid":{"rendered":"https:\/\/qalbit.com\/blog\/?p=1137"},"modified":"2026-04-15T19:43:26","modified_gmt":"2026-04-15T14:13:26","slug":"laravel-inertia-installation-guide-and-tips-tricks","status":"publish","type":"post","link":"https:\/\/qalbit.com\/blog\/laravel-inertia-installation-guide-and-tips-tricks\/","title":{"rendered":"Laravel Inertia: Installation guide and tips & tricks"},"content":{"rendered":"\n

Laravel is a widely used backend framework for web applications, many developers often use a separate frontend framework (React \/ Vue \/ Svelte) for creating a Single Page Application (SPAs<\/a>), which often leads the developers to develop and use APIs, which can be time-consuming and difficult. This setback in developing separate APIs for the frontend can be solved using Inertia.js<\/a> which helps developers create a single-page application without developing separate APIs. In this blog, we will understand what Inertia.js is and how to install it in laravel applications.<\/p>\n\n\n\n

\n

Want to see real business use cases? Explore how Laravel Inertia improves SEO, UX, and frontend performance<\/a>.<\/p>\n<\/blockquote>\n\n\n\n

What is Inertia.js?<\/strong><\/h2>\n\n\n\n

Inertia is a Javascript-based routing library popularly used to develop modern single-page apps by establishing a link between the backend and frontend frameworks.<\/p>\n\n\n\n

Inertia isn’t a framework, nor is it a replacement for your existing server-side or client-side framework, it can be considered as a ‘glue’ that tightly couples the back and front of a modern web app.<\/p>\n\n\n\n

Developers can use Inertia to couple powerful backend frameworks like Laravel\/Rails with powerful frontend frameworks like Vue \/ React \/ Svelte. So, it is not a Laravel-specific package, as some developers wrongly assume.<\/p>\n\n\n\n

Laravel-Inertia installation guide<\/strong><\/h2>\n\n\n\n

Laravel inertia installation will be a seamless and easy-to-understand guide, thanks to excellent Inertia documentation<\/a>. We will break it down into 5 pieces.<\/p>\n\n\n\n

Step 1: Setting up the server-side with Laravel<\/strong><\/h4>\n\n\n\n

Once you are finished with the installation of laravel, navigate to the current directory and install Inertia dependencies.<\/p>\n\n\n\n

composer require inertiajs\/inertia-laravel<\/code><\/pre>\n\n\n\n
Next, set up the root template that will be loaded on the first-page visit. This will be used to load your site assets (CSS\/JS) and contain a root <div> to boot your Javascript application.<\/p>\n\n\n\n
Next, search for app.blade.php<\/code><\/strong> file inside Resources\/Views directory or if not found, you may create a new file or replace the welcome.blade.php<\/code><\/strong>.<\/p>\n\n\n\n
After that replace the existing content with this code:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\" \/>\n    <link href=\"{{ mix('\/css\/app.css') }}\" rel=\"stylesheet\" \/>\n    <script src=\"{{ mix('\/js\/app.js') }}\" defer><\/script>\n    @inertiaHead\n  <\/head>\n  <body>\n    @inertia\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Here, @inertia<\/strong> acts like a helper that is a convenient way of passing first content to inertia and telling Laravel that the views are being generated using inertia.<\/p>\n\n\n\n
Not familiar with how Laravel handles rendering? Check our guide on the MVC architecture in Laravel<\/a> to understand its foundation.<\/p>\n\n\n\n
Step 2: Setting up the middleware<\/strong><\/h4>\n\n\n\n
Next, set up the Inertia middleware. In Laravel, you need to publish the HandleInertiaRequests<\/strong> middleware to your application, which can be done using this artisan command:<\/p>\n\n\n\n
php artisan inertia:middleware<\/code><\/pre>\n\n\n\n
After running the following command, register the inertia middleware inside your App\/Http\/Kernel.php<\/code><\/strong> file, as the last item in your web<\/code><\/strong> middleware group.<\/p>\n\n\n\n
'web' => [\n    \/\/ ...\n    \\App\\Http\\Middleware\\HandleInertiaRequests::class,\n],\n<\/code><\/pre>\n\n\n\n
After completing this your server-side setup is all complete and running. Now let’s get to the client-side setup and start your Laravel-Inertia experience.<\/p>\n\n\n\n
Following clean structure helps too! Learn how to organize Laravel code like a pro<\/a>.<\/p>\n\n\n\n
Step 3: Setting up the client-side with Vue\/React\/Svelte<\/strong><\/h4>\n\n\n\n
Next, we will be starting by installing a few dependencies for creating connection between the Laravel backend and your frontend framework.<\/p>\n\n\n\n
Install dependencies :<\/strong>
Install the Inertia client-side adapters using NPM or Yarn.<\/p>\n\n\n\n
\n  
\n    Vue<\/a>\n    React<\/a>\n    Svelte<\/a>\n  <\/div>\n<\/div>\n
\n  
\n    
        \nnpm install @inertiajs\/inertia @inertiajs\/inertia-vue3\nyarn add @inertiajs\/inertia @inertiajs\/inertia-vue3\n        <\/code>\n    <\/pre>\n  <\/div>\n  
\n    
        \nnpm install @inertiajs\/inertia @inertiajs\/inertia-react\nyarn add @inertiajs\/inertia @inertiajs\/inertia-react\n        <\/code>\n    <\/pre>\n  <\/div>\n  
\n    
        \nnpm install @inertiajs\/inertia @inertiajs\/inertia-svelte\nyarn add @inertiajs\/inertia @inertiajs\/inertia-svelte\n        <\/code>\n    <\/pre>\n  <\/div>\n<\/div>\n\n\n\n
\"Ready<\/a><\/figure>\n\n\n\n
Initialize App :<\/strong>
Next, update your main JavaScript file in resources\/js\/app.js<\/code> to boot your Inertia app. All we’re doing here is initializing the client-side framework with the base Inertia component.<\/p>\n\n\n\n
\n    
\n      Vue<\/a>\n      React<\/a>\n      Svelte<\/a>\n    <\/div>\n  <\/div>\n  
\n    
\n      
          \nimport { createApp, h } from 'vue'\nimport { createInertiaApp } from '@inertiajs\/inertia-vue3'\n            \ncreateInertiaApp({\n    resolve: name => require(`.\/Pages\/${name}`),\n    setup({ el, App, props, plugin }) {\n    createApp({ render: () => h(App, props) })\n        .use(plugin)\n        .mount(el)\n    },\n})            \n          <\/code>\n      <\/pre>\n    <\/div>\n    
\n      
          \nimport React from 'react'\nimport { render } from 'react-dom'\nimport { createInertiaApp } from '@inertiajs\/inertia-react'\n\ncreateInertiaApp({\n    resolve: name => require(`.\/Pages\/${name}`),\n    setup({ el, App, props }) {\n        render(, el)\n    },\n})\n          <\/code>\n      <\/pre>\n    <\/div>\n    
\n      
          \nimport { createInertiaApp } from '@inertiajs\/inertia-svelte'\n\ncreateInertiaApp({\n    resolve: name => require(`.\/Pages\/${name}.svelte`),\n    setup({ el, App, props }) {\n        new App({ target: el, props })\n    },\n})\n          <\/code>\n      <\/pre>\n    <\/div>\n  <\/div>\n\n\n\n
Add the above code to your resources\/js\/app.js<\/code> file.<\/p>\n\n\n\n
The resolve callback tells Inertia how to load a page component. It receives a page name and should return a page component module.
For the resolve callback to work, you should create a new directory named Pages and store your client-side views, as resolve will look for the components inside the Pages directory.<\/p>\n\n\n\n
Step 4: Compile your project with Laravel Mix<\/strong><\/h4>\n\n\n\n
Next, go to the webpack.mix.js<\/code> file, and after mix.js(\u2018resources\/js\/app.js\u2019, \u2018public\/js\u2019)<\/code>, add .vue()<\/code> code for finalizing your project.<\/p>\n\n\n\n
Now, the final step would be to run npm mix<\/code> and after the required dependencies are installed automatically, you may have to run it one more time. After this, your Laravel-Inertia project is ready for deployment. 
Tip: You can install and use browserSync package and add (.browserSync(http:\/\/yourlocalhosturl.com)<\/code>) to the webpack.mix.js<\/code> just the same as above, for auto-deploying while in development.<\/p>\n\n\n\n
Step 5: Render your view and routing<\/strong><\/h4>\n\n\n\n
Finally, all your Laravel-Inertia setup is complete and ready to deploy. All that remains is to render your views and pass parameters to the view as props.<\/p>\n\n\n\n
Rendering your frontend view template is the same as rendering the normal Laravel blade template that is done with the help of the view()<\/code> helper function. In Inertia it is the same, the only difference is that instead of using the view()<\/code> helper function, we can use Inertia::render()<\/code> or inertia()<\/code> helper function, which takes two parameters, first one is the template name which you may have created inside the resources\/js\/Pages<\/code> folder and the second one is an array of data that you will be passing to your frontend template as props. Look at the below example:<\/p>\n\n\n\n
use Inertia\\Inertia;\n\nclass EventsController extends Controller\n{\n    public function show(Event $event)\n    {\n        return Inertia::render('Event\/Show', [\n            'event' => $event->only(\n                'id',\n                'title',\n                'start_date',\n                'description'\n            ),\n        ]);\n    }\n}<\/code><\/pre>\n\n\n\n
Now, your Laravel-Inertia is fully set up and you have Single Page Application (SPA) without any use of APIs. Inertia also supports posting form data<\/a>, file uploads<\/a>, validation<\/a>, redirects<\/a>, and many other features that make your work easy.<\/p>\n\n\n\n
Need a scalable modular approach instead? See how Laravel HMVC<\/a> helps break large apps into reusable components.<\/p>\n\n\n\n
Benefits and Challenges of using Laravel Inertia<\/strong><\/h2>\n\n\n\n
Each and every technology has some limitations or challenges. Therefore, before choosing Laravel Inertia for your project, here are some pros and cons.<\/p>\n\n\n\n
Benefits of using Laravel Inertia js<\/strong><\/h4>\n\n\n\n