Vector package adds Vue 3 reactivity to Laravel Blade without build overhead

What It Does

Vector is a Laravel package that embeds Vue 3's <script setup> syntax directly into Blade templates. Instead of creating separate .vue files or reaching for Alpine.js, developers can write:

@vector
    <script setup>
        const count = ref(0);
    </script>
@endvector

<button @click="count++">Clicked @{{ count }} times</button>

The package handles variable extraction and component mounting automatically. Each @vector block creates an independent Vue instance scoped to its next sibling element.

The Implementation

Vector works by parsing <script setup> blocks at runtime, stripping Vue imports (provided globally via window.Vue), and generating mount scripts. Installation requires exposing Vue in your app.js and configuring Vite to use Vue's runtime compiler instead of the standard build-optimized version.

This is runtime compilation, not ahead-of-time bundling. The trade-off: faster iteration for simple components, slower initial render for complex ones.

Where This Fits

The package targets a specific use case: Laravel apps that are primarily server-rendered but need reactive islands. A toggle. A live search. A counter. The kind of UI that feels excessive for a full SPA setup but annoying in vanilla JavaScript.

For context, Laravel's official Vue integration uses Vite with separate component files. Inertia.js handles SPA-like experiences. Vector sits between these and Alpine.js, offering Vue's Composition API without the ceremony.

The Trade-offs

Vector won't replace proper Vue components for anything complex. No scoped styles. No component hierarchies. No hot module replacement for the embedded scripts. It's deliberately limited.

The runtime compilation also means you're shipping Vue's full compiler to the browser (around 40KB gzipped), which matters if you're optimizing bundle size.

What to Watch

This pattern of progressive enhancement in server-rendered apps keeps appearing. Laravel 12.x shipped with better Inertia.js starter kits. Alpine.js adoption continues growing. Vector represents another approach: bring the framework you know to the template layer.

The real question: does your architecture need this, or does it need a clearer separation between server and client rendering? Vector makes the blurred middle easier. Whether that's a feature or a warning depends on your team's maintenance philosophy.

Package is available via Composer as brunoabpinto/vector.