Vue with Phoenix

It can be a good idea, it all depends on what you’re trying to achieve and your needs

Here’s a recipe for setting it up: https://medium.com/@bonfirealgorithm/how-to-set-up-vue-js-with-phoenix-1-4-2ed8bda7f4e0

I know that no one here or in the community expresses this, but if your rendering server side then I see no real benefit to loading in a complete js framework like react or angular or vue … all these frameworks are designed to completely hand off the UI to the js, you also have a very large dependency to download, plus trying to keep sync between your fully handed off js app and the backend model… is a pain.

Every time I have to work with server side rendered pages (via any backend like elixir and phoenix, java and thymeleaf, .net and razor etc) I use what has always been popular in .Net circles… Knockout.js

Its a tiny dependency, you simply bind the server rendered variables directly to observed ko functions (they work the same as liveviews morphdom). All knockout does is data binding, it creates watched js functions that bind UI interactions to data model changes and visa versa.

You can bind the whole thing into a viewmodel class for OO … but for phoenix I just bind each piece of data to its own separate function … when that data changes it triggers a UI diff operation, I actually create observed ko function outside a class to work the same as single functions that I feels suits phoenix and elixir well and I’m never mutating a some overarching class object which saves alot of headaches. This gives you a powerful UI data binding system that means when data is say true, the bound element appears, or a class is added or an action is triggered, and the value just is linked so if data changes the values are automatically updated everywhere… all without the massive bundle loads of react vue etc.

Here was a git repo with a simple knockout binding to demonstrate, just a simple sprinkle of ko in the main view
https://github.com/evomedia247/Phoenix-and-knockout-example.git
Its built on that example project to build chat app in 8 minutes so updates with websockets. (GitHub - dwyl/phoenix-chat-example: 💬 The Step-by-Step Beginners Tutorial for Building, Testing & Deploying a Chat app in Phoenix 1.7 [Latest] 🚀 · GitHub)

UI elements are bound to the functions via the
data-bind=“text: dataItem” to display text say
or
data-bind=“if: dataItem” to display the element if var dataItem is present and
not null

Ko watched functions are defined in the script tag..
var dataItem = ko.observable('show me ');
ko.applyBindings( );

In this repo above the message display, the class switching for user styling and the message content display is all done via knockout, I pass knockout the phoenix websocket messages directly into a watched array and the UI updates when the messages update