About this app

When you create a new Laravel application you need to select a rendering engine such as Blade or Vue.js for the front. After one is selected you stick to it and wrap all further development around your rendering engine — it affects your backend responses, libraries you use, seo, how you test it and of course it determines how you compose your templates or components. That's why selecting front engine is a deliberate and responsible decision because you can not switch it on the fly... until now.

With this app I demonstrate how a Laravel app can work with two different rendering engines at once: with Blade templates and Vue.js components + Inertia.

Dynamic rendering

The idea of serving an app for two different front engines is educational, it hardly carries and functional value; it might be interesting for people:

• who are learning laravel and want to see how we render same looking page with different approaches
• who wants to decide which front engine suits them best
• who want to implement Blade and Vue.js for different parts of their app (Blade front and backend Vue.js)

Further I will describe how double rendering was implemented for this app.

In a core of Laravel lay routes and their responses; here is a route that displays a hello when a '/home' url is visited:

Route::get('/home', function () {
    echo 'hello world';
});

Now lets say you have a 'home.blade.php' view file at '/resources/views/' that you want to display. For this you write:

Route::get('/home', function () {
    return View::make('home');
});

Same for 'home.vue' component located at '/resources/js/pages/' — you output it as a view with:

Route::get('/home', function () {
    return Inertia::render('home');
});

We can actually see that out of the box nothing really prevents us from using both Blade and Vue in the same app, and it is indeed what many developers do: a fairly common practice is to use Blade for front and Vue for backend or vice-versa.

To be able to render same page with two different engines I created renderViewDynamic() method that returns a view based on a session's renderType variable:

function renderViewDynamic($viewName, $data = []): View|Response
{
    if ($_SESSION['renderType'] === 'blade') {
        return View::make($viewName, $data);
    } else {
        return Inertia::render($inertiaName, $data);
    }
}

This is it. In the essence now you can have two views for the same route and switch between them dynamically, to do this use:

Route::get('/home', function () {
    return renderViewDynamic('home');
});

The method above is simplified for the sake of demonstration, see the implemented version at my git repository.

In the footer you can see which render engine is currently being used and a button to switch it to an another engine. Try it out. You will not see any visual differences when switching and that is the point; but you can see the difference when you look at the page's source code.

Data sharing

When rendering a view passing some data to it is expected. Implementing it for both Blade and Vue+Inertia requires adjustment as well. The thing is sharing data with either Blade or Vue+Inertia requires using separate sharing methods:

View::share($view, $data); // shares $data with Blade
Inertia::share($view, $data); // shares $data with Vue+Inertia

The sharing of global variables happens inside the sharedDataProvider, which has a boot() method, where I put variables to be shared:

$sharedData = [
    'menu' => getMenus(),
    'phpVersion' => PHP_MAJOR_VERSION . '.' . PHP_MINOR_VERSION,
    'laravelVersion' => explode('.', App::version())[0],
    ...
];

Then, based on a renderType variable, a proper sharing method is selected:

foreach ($sharedData as $key => $data) {
    switch (getRenderType()) {
        case \RenderType::BLADE->value:
            View::share($key, $data);
            break;
        case \RenderType::INERTIA->value:
            Inertia::share($key, $data);
            break;
    }
}

It is also possible to share data for both engines at once for a price of a certain overhead.

Things to keep in mind

You can not use php expressions in Vue components: you can not access a session or call global functions, like you can do in a Blade template. You need to pass everything in a $data array.

Seo appearance will be very different for Blade and Vue, specifically out of the box Vue.js will require additional effort to make it seo-friendly, while Blade will work just fine.

Want to know more?

You can check whole source code of the app at my github page.