Vector: Blade에 Vue를 연결하는 가장 쉬운 방법

Source: Dev.to

Laravel 앱을 만들다 보면 “조금만 반응성이 필요해” 하는 순간이 있죠? 카운터 하나, 토글 하나. 전체 Vue 컴포넌트를 만들기엔 과하고, 순수 JavaScript 로는 너무 귀찮은 경우 말이에요.

Alpine.js 를 자꾸 쓰게 되는데, Alpine.js 도 좋지만 저는 Vue의 Composition API—ref(), computed(), 익숙한 문법—를 쓰고 싶었어요. 그래서 Vector 를 만들었습니다.

이게 뭐죠?

Vector는 Laravel 패키지로, Blade 템플릿 안에 Vue의 “ 문법을 그대로 쓸 수 있게 해줍니다:

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

    Clicked @{{ count }} times

그게 전부입니다. 컴포넌트를 위한 빌드 단계도 없고, 별도의 .vue 파일도 없습니다. Blade에 Vue를 살짝 뿌린 것뿐이죠.

왜 만들었나요?

다음과 같은 정신적 체조가 지겨웠습니다:

• “이거 반응성이 필요해”
• “Vue 컴포넌트를 만들까?”
• “그냥 카운터인데…”
• “알겠어, Alpine 쓰자”
• “아, Alpine에서 computed 속성은 어떻게 쓰는 거지?”

Vector를 사용하면 언제나 이렇게 답할 수 있습니다: Vue에서 쓰는 것처럼 작성하면 됩니다. 왜냐하면 그 자체가 Vue이기 때문이죠.

작동 원리

@vector 디렉티브는 다음을 수행합니다:

• “ 블록을 캡처하고
• Vue import 문을 제거합니다(전역으로 제공됨)
• 변수 선언을 추출합니다

그 후, 다음 형제 요소에 Vue를 마운트하는 스크립트를 생성합니다:

(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);

핵심은 변수 추출에 있습니다. const, let, var 선언을 파싱하고 자동으로 템플릿에 반환해 줍니다. 일반 코드를 작성하면 나머지는 자동으로 처리됩니다.

설치 방법

composer require brunoabpinto/vector

app.js 에서 Vue를 전역으로 노출합니다:

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

vite.config.js 를 Vue의 런타임 컴파일러를 사용하도록 업데이트합니다:

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

트레이드‑오프

잘 맞는 경우

• 빠른 인터랙티브 요소
• 프로토타이핑
• Vue의 API는 원하지만 Vue의 번거로움은 피하고 싶을 때
• 대부분 서버‑렌더링되고 일부만 반응성이 필요한 Laravel 앱

그다지 적합하지 않은 경우

• 복잡한 컴포넌트 계층 구조
• 정식 SFC 기능(스코프 스타일 등)
• 대규모 SPA(이 경우 Inertia 혹은 완전한 Vue 설정 사용)

여러 컴포넌트? 문제 없어요

각 @vector 블록은 독립적입니다:

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

    
    
Hello, @{{ name }}!

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

    - @{{ item }}

    
@{{ count }} items

이거 저주받은 건가요?

조금은 그렇습니다. 우리는 Vue 템플릿을 런타임에 컴파일하고 있는데, 이는 “모든 것을 미리 컴파일한다”는 철학과는 반대됩니다. 하지만 때로는 방해가 되지 않는 도구가 가장 좋은 선택이죠. 전체 컴포넌트 생태계를 구축하지 않고 Blade 뷰에 반응형 카운터만 넣고 싶을 때, Vector가 해결책이 됩니다.

사용해 보기

패키지는 GitHub 에서 확인할 수 있습니다. 별을 달아 주시고, 포크하거나 의견을 알려 주세요.

composer require brunoabpinto/vector