LiVue: Use Vue 3 Directives in Laravel Blade Templates

Originally published at recca0120.github.io Livewire users know the joy: no APIs, no frontend/backend separation, just define state and methods in PHP, and your Blade template becomes a reactive UI. But Livewire's frontend is Alpine.js — limited in scope. If you want the Vue ecosystem (Vuetify, Pinia, Vue plugins), you have to switch to Inertia.js, which means .vue files, props passing, and client-side state management. LiVue solves this: it brings Livewire's server-driven architecture to Vue 3. PHP handles state and logic, Vue 3 handles DOM reactivity, and you write Vue directives directly in Blade templates. How It Works LiVue's request lifecycle has five steps: A PHP Component class defines public properties (reactive state) and public methods (callable actions) Blade templates mix Blade syntax with Vue directives ( v-click , v-model , v-if , v-for ) Laravel renders complete HTML server-side; state is encrypted and HMAC-signed before embedding in the page Vue 3 hydrates the DOM on t