Hi,
I have created LitElement custom component wrapper to accept setConfig method and to pass config to Vue 3 custom component. Once you have your Vue component connected, cards on a dashboard are created the same way as you’d do it within lovelace (create card, set config in yaml). This way I have 2 components registred in HA, but in reality only one is gonna be actively changed and used and it will be Vue component. At home I have created interactive dashboard card in Vue 3 that is connected to HA api and socket. It is serving us amazing so far.
Initialy I have used only LitElement custom component but templating has became messy in a short time. Vue really came to the rescue but using only Vue component was returning ‘i.setConfig is not a fuction’. This is why I have decided to use it with LitElement wrapper. This way, card config is dinamically passed to Vue component and best thing is that Vue CLI doesn’t have to be installed on HA server, no need to use cdn either. Just build Vue component anywhere and pass an output to HA.
I haven’t tried, but LitElement component wrapper should work with any other lib or framework, even with vanilla JS web components.
All steps to run base project are in a readme file on git but if you have any questions feel free to ask. Please try and give me a feedback.
