Vector: The easiest way to plug Vue in Blade

Source: Dev.to

You know that feeling when you’re building a Laravel app and you just need a tiny bit of reactivity? A counter. A toggle. Something that feels overkill for a full Vue component but too annoying for vanilla JavaScript?

I kept reaching for Alpine.js, which is great, but I wanted Vue’s Composition API—the ref(), the computed(), the familiar syntax I already know. So I built Vector.

What Even Is This?

Vector is a Laravel package that lets you write Vue’s “ syntax directly in your Blade templates:

@vector
    
        const count = ref(0);
    
@endvector

    Clicked @{{ count }} times

That’s it. No build step for your components. No separate .vue files. Just Blade with a sprinkle of Vue.

Why Though?

I was tired of the mental gymnastics:

• “This needs reactivity”
• “Should I make a Vue component?”
• “But it’s just a counter…”
• “Fine, I’ll use Alpine”
• “Wait, how do I do computed properties in Alpine again?”

With Vector, the answer is always: write it like you would in Vue, because it is Vue.

How It Works

The @vector directive does a few things:

• Captures your “ block
• Strips the Vue imports (they’re provided globally)
• Extracts your variable declarations

It then generates a script that mounts Vue on the next sibling element:

(function(__script) {
    function __mount() {
        const { createApp, ref } = window.Vue;

        const count = ref(0);

        createApp({
            setup() {
                return { count };
            }
        }).mount(__script.nextElementSibling);
    }
    // ... waits for Vue to be available
})(document.currentScript);

The magic is in the variable extraction. It parses const, let, and var declarations and auto‑returns them to the template. You write normal code; it figures out the rest.

Installation

composer require brunoabpinto/vector

Expose Vue globally in your app.js:

import * as Vue from "vue";
window.Vue = Vue;

Update your vite.config.js to use Vue’s runtime compiler:

resolve: {
    alias: {
        'vue': 'vue/dist/vue.esm-bundler.js',
    },
},

The Trade‑offs

Good for

• Quick interactive elements
• Prototyping
• When you want Vue’s API without Vue’s ceremony
• Laravel apps that are mostly server‑rendered with islands of reactivity

Not great for

• Complex component hierarchies
• Proper SFC features (scoped styles, etc.)
• Large‑scale SPAs (use Inertia or a full‑blown Vue setup)

Multiple Components? No Problem

Each @vector block is independent:

@vector
    
        const name = ref('World');
    
@endvector

    
    
Hello, @{{ name }}!

@vector
    
        const items = ref(['Apple', 'Banana']);
        const count = computed(() => items.value.length);
    
@endvector

    - @{{ item }}

    
@{{ count }} items

Is This Cursed?

A little bit, yes. We’re essentially doing runtime compilation of Vue templates, which goes against the “compile everything ahead of time” philosophy. But sometimes the right tool is the one that gets out of your way. When you just want a reactive counter in a Blade view without spinning up a whole component ecosystem, Vector is there.

Try It

The package is available on GitHub. Star it, fork it, or let me know what you think.

composer require brunoabpinto/vector