brunoabpinto/vector
最新稳定版本：0.0.3
Composer 安装命令：
composer require brunoabpinto/vector
包简介
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
统计信息
- 总下载量： 6
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 1
- 点击次数： 3
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2026-02-03