diff --git a/bridge-components.md b/bridge-components.md
new file mode 100644
index 0000000..949ee17
--- /dev/null
+++ b/bridge-components.md
@@ -0,0 +1,220 @@
+# Bridge Components (in beta)
+
+As of version 1.3, Splade supports bridging Blade Components and Vue Templates. This means there's two-way binding of the public PHP properties and the templates' properties, and you may call public methods from within the template as if they were JavaScript methods.
+
+> **Warning**
+> This feature is still in beta and therefore experimental. Use with care!
+
+## Prerequirement
+
+First, you must register a supporting route using the `spladeWithVueBridge()` method on the `Route` facade. As of version 1.3.0, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` Middleware, for example, in `web.php`:
+
+```php
+Route::spladeWithVueBridge();
+```
+
+## Example component
+
+Let's start with an example component, and later on, we'll dive into the technical details. We'll start with creating a component to quickly fake a user's email address:
+
+```bash
+php artisan make:component FakeEmail
+```
+
+The component has two properties: a User model and an optional prefix. There's a method that performs the update, and lastly, there is the `WithVue` trait:
+
+```php
+<?php
+
+namespace App\View\Components;
+
+use App\Models\User;
+use Illuminate\View\Component;
+use ProtoneMedia\Splade\Components\WithVue;
+
+class FakeEmail extends Component
+{
+    use WithVue;
+
+    public function __construct(
+        public User $user,
+        public ?string $prefix = ''
+    ) {
+    }
+
+    public function fake()
+    {
+        $this->user->update([
+            'email' => $this->prefix . fake()->email,
+        ]);
+    }
+
+    public function render()
+    {
+        return view('components.fake-email');
+    }
+}
+```
+
+In the template, all public properties of the Blade Component are available through the `props` object. So instead of echoing the email address using Blade's curly braces, we'll use Vue's syntax to ensure the two-way binding. Finally, we'll attach the method to the button's click handler and use the `v-model` directive to set the prefix:
+
+```blade
+<p>User Email: <span v-text="props.user.email" /></p>
+
+<input v-model="props.prefix" placeholder="Prefix..." />
+
+<button @click="fake">Fake Email</button>
+```
+
+That's it! You don't have to register a route or controller for each new component. Instead, everything is handled for you using the `WithVue` trait. Now you may use the Blade Component:
+
+```blade
+<x-fake-email :user="$user" />
+```
+
+## Security
+
+Please be very aware that all public properties are exposed to the browser and thus visible to the end user. Be sure sensitive Model attributes are [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json), or use the built-in [Transformer feature](/transformers.md).
+
+## Collections
+
+Similar to not using Blade's curly braces, you should use Vue's [`v-for` directive](https://vuejs.org/guide/essentials/list.html) to loop over data instead of Blade's `@foreach` directive. This way, the list will reflect updates that may happen server-side.
+
+```blade
+<ul>
+    <li v-for="(user, index) in props.users" :key="index">
+        <span v-text="user.name" />
+    </li>
+</ul>
+```
+
+## Renderless example
+
+Instead of using the view template, you may also omit the `render` method and use the component directly in your template. The great thing about that is that you may reuse the same logic repeatedly but still be able to fully customize the UI. So first, let's remove the method:
+
+```php
+<?php
+
+namespace App\View\Components;
+
+use App\Models\User;
+use Illuminate\View\Component;
+use ProtoneMedia\Splade\Components\WithVue;
+
+class FakeEmail extends Component
+{
+    use WithVue;
+
+    public function __construct(
+        public User $user,
+        public ?string $prefix = ''
+    ) {
+    }
+
+    public function fake()
+    {
+        $this->user->update([
+            'email' => $this->prefix . fake()->email,
+        ]);
+    }
+}
+```
+
+Now you can use the component in other templates and provide the UI with a slot:
+
+```blade
+<h1>Page Title</h1>
+
+<x-fake-email :user="$user">
+    <p>User Email: <span v-text="props.user.email" /></p>
+
+    <input v-model="props.prefix" placeholder="Prefix..." />
+
+    <button @click="fake">Fake Email</button>
+</x-fake-email>
+```
+
+## Inline Component View
+
+Instead of using a dedicated file for the template, you may also use an [Inline Component View](https://laravel.com/docs/10.x/blade#inline-component-views):
+
+```php
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+use ProtoneMedia\Splade\Components\WithVue;
+
+class FindIp extends Component
+{
+    use WithVue;
+
+    public function __construct(
+        public $hostname = '',
+        public $ip = '',
+    ) {
+    }
+
+    public function find()
+    {
+        $this->ip = gethostbyname($this->hostname);
+    }
+
+    public function render()
+    {
+        return <<<'blade'
+            <input v-model="props.hostname" />
+            <button @click="find">Find IP</button>
+            <p v-text="props.ip" />
+        blade;
+    }
+}
+```
+
+## Toasts and Redirects
+
+You may send a [Toast](/toasts.md) from a component method to the frontend:
+
+```php
+use ProtoneMedia\Splade\Facades\Toast;
+
+public function fake()
+{
+    $this->user->update([
+        'email' => $this->prefix . fake()->email,
+    ]);
+
+    Toast::success('User updated');
+}
+```
+
+Similarly, you may return a Redirect:
+
+```php
+public function fake()
+{
+    $this->user->update([
+        'email' => $this->prefix . fake()->email,
+    ]);
+
+    return redirect()->route('users.index');
+}
+```
+
+## Middleware and Rate Limiting
+
+By default, component methods called from the frontend will use the same Middleware stack as the original route. In addition, you may call the `middleware` method to apply additional constraints:
+
+```php
+public function fake()
+{
+    $this->middleware('can:update-email');
+
+    $this->user->update([
+        'email' => $this->prefix . fake()->email,
+    ]);
+}
+```
+
+Also, just like controller methods, public component methods may be manually invoked by users. Therefore, always validate incoming data and, when necessary, use a [Rate Limiter](https://laravel.com/docs/10.x/rate-limiting#main-content).
\ No newline at end of file
diff --git a/index.json b/index.json
index 0c3570b..7340543 100644
--- a/index.json
+++ b/index.json
@@ -17,6 +17,7 @@
         "Toasts": "toasts",
         "Shared data": "shared-data",
         "Title and meta tags": "title-meta",
+        "Transformers": "transformers",
         "Lazy loading": "lazy-loading",
         "Server-side rendering (SSR)": "ssr"
     },
@@ -66,6 +67,7 @@
         "State management": "state-management",
         "Persistent layout": "persistent-layout",
         "Event bus": "event-bus",
+        "Bridge Components (Beta)": "bridge-components",
         "Customization": "customization",
         "Translations": "translations",
         "Exception handling": "exception-handling",
diff --git a/introducing-splade.md b/introducing-splade.md
index 94686a8..6d6d79b 100644
--- a/introducing-splade.md
+++ b/introducing-splade.md
@@ -68,7 +68,7 @@ The dedicated form component allows you to send forms asynchronously. It catches
 
 First, let's explain the `x-form` component: it's a wrapper around a Vue component. Yes, each Splade component consists of a renderless Vue component (where all interactive magic happens) wrapped in a Blade component.
 
-In the following example, the form component is given some default data, that of the authenticated user. Note that the user data is passed to the frontend, so please be sure sensitive attributes [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json).
+In the following example, the form component is given some default data, that of the authenticated user. Note that the user data is passed to the frontend, so please be sure sensitive attributes are [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json), or use the built-in [Transformer feature](/transformers.md).
 
 ```blade
 <x-form :action="https://github.com/route('user.current.update')" :default="auth()->user()">
diff --git a/transformers.md b/transformers.md
new file mode 100644
index 0000000..eec4a02
--- /dev/null
+++ b/transformers.md
@@ -0,0 +1,54 @@
+# Transformers
+
+In components such as [Data](/x-data.md) and [Form](/x-form.md), you may want to pass PHP objects to the frontend. The most common example is an Eloquent Model. Though you may [hide sensitive attributes](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json) from being passed to the frontend, and though the Form Components have [built-in support](/form-model-binding-attributes.md) to guard Model attributes, you may also choose to use a Transformer.
+
+Splade makes it very easy to define a Transformer once, and use it throughout the application in the Data, Defer, Form, and Bridge Components. It supports [Eloquent API Resources](https://laravel.com/docs/10.x/eloquent-resources), [Fractal Transformers](https://fractal.thephpleague.com), and a simple closure.
+
+
+## Transform using an Eloquent Resource Class
+
+Configuring a Transformer is as easy as calling the `transformUsing` method on the `Splade` facade, for example, in the `AppServiceProvider` class:
+
+```php
+Splade::transformUsing(User::class, UserResource::class);
+```
+
+### Pass multiple transformers
+
+Instead of calling the `transformUsing` methods multiple times, you may also pass an array:
+
+```php
+Splade::transformUsing([
+    Team::class => TeamResource::class,
+    User::class => UserResource::class,
+]);
+```
+
+### Fallback and Enforcement
+
+When no Transformer has been configured, Splade won't transform the given data and passes it untouched. If you want to enforce using Transformers, and protect against missing Transformers, you may call the `requireTransformer` method on the `Splade` facade:
+
+```php
+Splade::requireTransformer();
+```
+
+### Transform using a Fractal Transformer
+
+To use Fractal Transformers, you need to install the [`spatie/fractalistic`](https://github.com/spatie/fractalistic) package.
+
+```php
+Splade::transformUsing(User::class, UserTransformer::class);
+```
+
+### Transform using a Closure
+
+For simple transformations, you may pass a closure:
+
+```php
+Splade::transformUsing(User::class, function ($user) {
+    return [
+        'name'  => $user->name,
+        'email' => $user->email,
+    ];
+});
+```
\ No newline at end of file
diff --git a/x-data.md b/x-data.md
index 84f339f..3431fb3 100644
--- a/x-data.md
+++ b/x-data.md
@@ -37,7 +37,7 @@ As you can see, this allows you to pass in arrays, but you can also use `Arrayab
 </x-splade-data>
 ```
 
-Note that the user data is passed to the frontend, so please be sure sensitive attributes [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json).
+Note that the user data is passed to the frontend, so please be sure sensitive attributes are [hidden](https://laravel.com/docs/10.x/eloquent-serialization#hiding-attributes-from-json), or use the built-in [Transformer feature](/transformers.md).
 
 ## Remember