Introduction

Hybridly can be installed on a Laravel application to make it easy to build applications using Vue instead of Blade, while keeping the benefits of classic monolithic applications.

Overview

Using a protocol similar to the one Jonathan Reinink invented for Inertia, Hybridly makes it possible to build applications using Vue instead of Blade, while keeping the benefits of classic monolithic applications.

Hybridly is essentially very similar to Inertia, but it has a different philosophy. Since it focuses on Laravel, Vite and Vue instead of being completely framework-agnostic, it has more built-in features and quality of life improvements, which results in a better developer experience overall.

In other words, Hybridly is more like a framework built on top of Laravel and Vue, focusing specifically on being the perfect glue between the two.

What it looks like

Working with Hybridly is pretty similar to working with basic Laravel. The main difference is how you render views, since Hybridly uses Vue.

Due to the nature of client-rendered applications, you also lose the access of some features like route or @can in templates. Fortunately, we have alternatives for them!

Below are some basic examples of what Hybridly code looks like:

Controllers

Controllers look the same as what you are used to with Laravel. The main difference is that you return hybrid responses using the Hybridly\view function instead of Laravel's built-in view.

UserProfileController.php

use App\Users\UserData;
use App\Users\User;
use App\Users\UpdateUserRequest;
use Hybridly\Contrats\HybridResponse;

use function Hybridly\view;

final readonly class UserProfileController
{
    public function show(User $user): HybridResponse
    {
        return view('users.show', [
            'user' => UserData::from($user)
        ]);
    }

    public function update(User $user, UpdateUserRequest $request): RedirectResponse
    {
        $user->update($request->validated());

        return back()->with('success', 'Changes saved.');
    }
}

routes.php

Route::get('/users/{user}', [UserProfileController::class, 'show'])
  ->name('users.show');

Route::put('/users/{user}/update', [UserProfileController::class, 'update'])
  ->name('users.update');

Templates

Hybridly uses Vue to render pages using single-file components. You may use layouts using a simple directive.

<script setup lang="ts">
import { Form } from 'hybridly/vue'

defineProps<{
	user: App.Users.UserData
}>()
</script>

<template layout="user-profile">
	<user-card :user />
	<!-- this is a Form component provided by Hybridly -->
	<Form @submit="form.submit()" :action="route('users.update', { user })">
		<input name="name" label="Name" />
		<input name="email" label="Email" type="email" />
		<button type="submit">Update profile</button>
	</Form>
</template>

There are a few things going on there:

• The template block has a layout directive that specifies which persistent layout is being used for this page. Learn more about layouts.

• The user property is typed using an auto-generated interface from a data object. You can learn more about TypeScript integration here.

• We use the <Form> component or the useForm util to work with forms. Learn more about them on the forms documentation.

• Hybridly provides a route util to generate URLs, similar to Laravel's route helper.

Beyonds the basics

Rendering a single page with a form is cool, but real-world applications are more complex.

After learning about essential features using the sidebar to your left, you may want to learn about:

• How to render dialogs
• How to implement filters and sorts
• How to implement data tables

 

About Inertia and Hybridly

I was barely into the Laravel ecosystem when Jonathan Reinink was already looking for a way to build Vue-powered Laravel applications the right way.

He came up with Inertia, which is now backed by Laravel. It powers Forge and Laravel Cloud. It is a well-established tool. If you already build applications using Inertia and you don't feel like you should change your stack, there is no need to reach for a different tool.

Hybridly came to life because of Inertia's history. When it was first released, its philosophy was to stay very minimalist—it had very few features beyond basic routing and rendering. Moreover, its pace of development has been a source of frustration for its users, with pull requests and issues not being handled for months.

Nowadays, Inertia has changed a lot. It is very featureful, supports TypeScript and is updated regurlarly.

However, Hybridly is here to stay. It is what I use for development, and I will keep maintaining it for the foreseeable future. It is a more opinionated tool, with different built-in features and quality of life improvements, the most notable ones being support for dialogs and data tables.