Using Blade Views in a Laravel Inertia Project

September 24, 2025

I love Inertia, it’s great for building SPAs. But sometimes Blade views are the better choice, even in an Inertia project. This is especially true for your marketing pages. They should be rendered on the server to help you with SEO. Thankfully, this can be easily achieved, and you can mix and match Blade & Inertia Views in your Laravel project without a problem. In this blog post, I will show you how to add a Blade view alongside your Inertia pages.

Why should I use Blade instead of enabling SSR with Inertia?

Because using SSR with Inertia adds unnecessary complexity to your deployment. You now need to configure a NodeJS runner on your machine to run alongside your Laravel app to render those pages. This is just completely unnecessary, especially if you are self-hosting. Keep it simple.

Create a Blade View

Under resources/views Create a new file called landing.blade.php and fill it with an HTML skeleton.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1 class="text-3xl font-bold text-blue-500">hello world</h1>
</body>
</html>

Create a Blade route

In routes.web.php Add a new route.

Route::get('/landing', function () {
    return view('landing');
})->name('landing');

Create a CSS file for your blade views

In resources/css Create a new file called blade.css and add the following content to it:

/*tailwind css only for blade views*/
@import "tailwindcss";
@source "../views";

In our blade views, we use this stylesheet.

Reference the new stylesheet in your blade view

Add the following line to the <head> tag of the blade view we just created.

    @vite(['resources/css/blade.css'])

Your blade file should look like the following now.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {{--add this line here--}}
    @vite(['resources/css/blade.css'])
</head>
<body>
<h1 class="text-3xl font-bold text-blue-500">hello world</h1>
</body>
</html>

Tell the Laravel Vite Plugin about the new style sheet.

Open your vite.config.ts and configure the Vite plugin to know about the new stylesheet. You can do this by adding resources/css/blade.css to the input array:

import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.tsx',
                // Add this line to include the blade.css file
                'resources/css/blade.css',
            ],
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react(),
        tailwindcss(),
        wayfinder({
            formVariants: true,
        }),
    ],
    esbuild: {
        jsx: 'automatic',
    },
});

And that is it. Visit /landing To test it out yourself.

Conclusion

We combined Blade and Inertia to get the best of both worlds without complicating our deployment process :)