Integrate Vue.js components into Phoenix LiveView applications with seamless end-to-end reactivity.
LiveVue is a library that integrates Vue.js components into Phoenix LiveView applications, enabling seamless end-to-end reactivity between server and client. It allows developers to build hybrid web applications where complex client-side interactions are handled by Vue while maintaining LiveView's real-time server-state management. This solves the problem of writing imperative JavaScript hooks in LiveView for complex UI logic.
Elixir/Phoenix developers building interactive web applications who want to leverage Vue.js for complex client-side components without sacrificing LiveView's real-time capabilities. It's ideal for teams familiar with both ecosystems looking to combine their strengths.
Developers choose LiveVue because it provides a seamless integration between Vue and LiveView with minimal configuration, efficient data synchronization, and access to Vue's extensive ecosystem. Its unique selling point is maintaining full end-to-end reactivity while allowing developers to use Vue's component model for complex client-side logic.
End-to-end reactivity for Phoenix LiveView and Vue
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Provides full bidirectional data flow between Vue components and LiveView over WebSocket, enabling real-time updates without manual state synchronization, as highlighted in the features.
Vue components are rendered on the server for better initial load performance and SEO, a key feature that enhances user experience and search engine visibility.
Uses JSON Patch diffing to send only changed props over the WebSocket, minimizing bandwidth usage and reducing latency, as specified in the README.
Offers `useLiveForm()` for server-side validation with Ecto changesets, simplifying complex form logic and error handling in hybrid applications.
Locks your application into Vue.js, making it unsuitable for teams using other frameworks or requiring framework-agnostic solutions, which limits flexibility.
The Igniter installer only works with Phoenix 1.8+, forcing manual configuration for older projects, increasing setup time and potential errors.
Introduces Vite and other build tools, adding complexity to the development and deployment pipeline compared to standard LiveView setups.