Introduction

Hybridly's purpose is to drastically improve the productivity and the developer experience of writing interactive applications using Laravel and Vue.

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.

Differences with Inertia

To get an idea about their differences, head over to the comparison page.

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 replacements 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\Data\UserData;
use App\Models\User;
use App\Http\Requests\UpdateUserRequest;

use function Hybridly\view;

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

    public function update(User $user, UpdateUserRequest $request)
    {
        $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">
const $props = defineProps<{
	user: App.Data.UserData
}>()

const form = useForm({
	url: route('users.update', { user: $props.user }),
	method: 'PUT',
	fields: {
		name: $props.user.name,
		email: $props.user.email,
	}
})
</script>

<template layout="user-profile">
	<user-card :user="user" />
	<form @submit="form.submit">
		<base-input v-model="form.fields.name" label="Name" />
		<base-input v-model="form.fields.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 useForm util to work with forms. Learn more about it 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. 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.

However, Inertia has its issues.

The pace of development of Inertia has been a source of frustration for its users.

There have been months without release or news about its development. Months without any commit to the repository. Months during which pull requests and issues were not handled, and are, to this day, still not addressed.

Because of that, other issues with the implementation itself, and some of my opinions diverging from the philosophy of the maintainers, I simply decided to build my own solution.

---

What's the goal of this project?

Hybridly aims to provide the best developer experience possible when using Laravel, Vue and Vite. Over time, it might become closer to what Nuxt 3 currently is in terms of DX.

 

When should I use Hybridly instead of Inertia?

Inertia is popular and sponsored by Laravel. It's the safe option. Hybridly is moving faster, and exists because Inertia has issues and a different philosophy. Chose Inertia for better community support, and Hybridly if you value developer experience more at the expense of a smaller community.

 

Why fork Inertia instead of contributing?

That's what I tried before writing Hybridly, but the maintenance of Inertia is highly lacking, pull requests and issues are not being addressed. Additionally, its minimalist philosophy is not compatible with my developer experience needs.

 

Can I use Hybridly with other frameworks than Laravel or Vue?

The core of Hybridly is framework-agnostic, just like Inertia's. But there is no plan for an official adapter other than Laravel and Vue, because that is what I am using and willing to maintain. Feel free to create your own adapter though.

 

Will Hybridly be properly maintained?

I'm primarily building Hybridly for myself. I am actively using and improving it. That means Hybridly is an opinionated project and may not suit your tastes, but it will live as long as I am a developer and I didn't find a better way to build web applications. That being said, if I ever happen to give up on Hybridly, I will make sure to pass the project on the community so it can live on.