I tried to add the example card and it works. Building on that I would like to understand what exactly would be added as MyVueStuff, in the context of Vue:
No - but I had several other problems in the meantime and left that part aside.
I will come back to it, though, as I will get a touch screen and want to use the HA interface there (and need my own widgets in Vue in that case).
Once I have it working I will post it on Github, this is a good idea (but don’t hold your breath just yet - I have to finish some other personal code before that)
I’m also interested to know if it’s possible to use vue.js to completely design my own custom dash boards.
I think there are a lot of front end cards available, but if I would like to design my house interface the way I would like it to be, it’s better to design it completely from scratch, and link the elements to the HA backend…(?)
If you want to design it from scratch, then it is not difficult if you can code. I would just use Quasar/Vue3 for an SPA/PWA and call the relevant webhooks in HA (or set up websockets to have an always-on connection).
This is what I have today but I wanted to leverage HA Lovelace and just add my own fullscreen card as the frontend for a “hardware dashboard” (a touch screen) and keep everything in one place otherwise (the HA Lovelace UI)
Cool, I’m working with vuejs daily so that shouldn’t be a problem.
Do you have anything you can share about settings up the connection within a SPA?
If you would have a github repo somewhere would be great to have a look at before I get started
I once made a start on a completely custom ui frontend made in vuejs. Was pretty simple to setup, but was struggling when I wanted to show things like camera feeds. Doesn’t seem like the backend/api/websockets provide any help with that. What would be the best approach to get camera feeds into a custom UI?
Hi there. I have created LitElement wrapper to accept setConfig method and to pass it to vue 3 custom component. Code can be found on link below. This way I have 2 components but they work. I have tried it with HA api and socket and it is serving us at home amazing so far. Please try and give me a feedback.
@iva Thanks for your efforts on this - I tried this out and it doesn’t seem to work for me:
Issue 1 - nothing shows in dashboard:
When I went to add a card to the dashboard I saw two card’s when I filtered by “iva” - I chose the “Custom: Room card by Iva” one and not the “Custom: Room Card by Iva S.” one - I assume that is correct?
This is what is in my yaml for the dashboard that results in nothing showing up:
- type: custom:lit-custom-card
someProp: You did it legend :)
Issue 2 - running it locally in vite:
when I do npm run dev it works fine and I can hit http://127.0.0.1:5173/ but I dont see anything - even if I modify HACustomCard.vue by adding something like <h2>title</h2> I still dont see anything but a blank page served via the dev url - isn’t the whole idea of this to be able to do normal dev via vite (with stubbed out config json) and then just deploy to ha dashboard?
I have updated the code in accordance with your comment. There is devConfig file in root dir that should contain same config as in HA card yaml. If there is no config from props it will throw an error and it will be set from dev file in catch statement. That should solve an issue with running vite localy.
There is also update for README.md . In prior version i have accidentaly ommited first line so it should look like example below. There should be no dashes or empty spaces in card’s config yaml
type: custom:lit-custom-card
someProp: You did it legend :)
In addition, there is an update in naming so things should look more clear, but naming is really completly up to you.
- I have to finish some other personal code before that)