包简介

Vue reactivity in Blade templates using a familiar script setup syntax

README 文档

README

Vector

Vue reactivity in Blade templates using a simple <script setup> tag.

Installation

composer require brunoabpinto/vector

Frontend Setup

Install Vue:

npm install vue

Add Vector to your Vite entry points in vite.config.js:

export default defineConfig({
  plugins: [
    laravel({
      input: [
        "resources/css/app.css",
        "resources/js/app.js",
        "resources/js/vendor/vector.js",
      ],
      refresh: true,
    }),
  ],
  resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",
    },
  },
});

Add @vectorJs before your closing </body> tag in your layout:

<body>
    {{ $slot }}

    @vectorJs
</body>

Usage

Use the <script setup> tag to add Vue reactivity to your Blade templates:

<script setup>
    const i = ref(0);
</script>

<div>
    <button @click="i++">Click Me</button>
    <div>
        Count: @{{ i }}
    </div>
    <div v-if="i > 5">Success!</div>
</div>

How it works

The <script setup> tag is transformed at compile time
It extracts variable declarations and auto-returns them to the template
Vue mounts on the next sibling element after the script—anything outside that element is not parsed by Vector
All Vue Composition API functions are available: ref, reactive, computed, watch, onMounted, etc.

Escaping Blade Syntax

Since Blade also uses {{ }}, prefix Vue's mustache syntax with @ to prevent Blade from processing it:

{{-- Blade --}}
{{ $phpVariable }}

{{-- Vue (note the @) --}}
@{{ vueVariable }}

Or use Vue directives like v-text:

<span v-text="count"></span>

License

MIT

brunoabpinto/vector 适用场景与选型建议

brunoabpinto/vector 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 6 次下载、GitHub Stars 达 1，最近一次更新时间为 2026 年 02 月 03 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 brunoabpinto/vector 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 brunoabpinto/vector 我们能提供哪些服务？

定制开发 / 二次开发

基于 brunoabpinto/vector 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

brunoabpinto/vector

包简介