Websocket API: self generating dynamic dashboard in a Vue app

Third party integrations
1

The idea is to integrate a dynamic layout which builds upon reading the JSON. Right now I already have the Websocket up & running, figured out how to call HA to give a list of all my services and use these credentials to control my Spotify (mainly as a test for the websocket connection).

Here’s my issue. To control Spotify I have a simple <button> which calls a function playButtonSpotify. This function contains:

function playButtonSpotify() {
    ws.send(JSON.stringify({
        "id": incrementedCallId(),
        "type": "call_service",
        "domain": "media_player",
        "service": "media_play_pause",
        "service_data": {
            "entity_id": "media_player.spotify_my_username"
        }
    }));
}

This works…

But I’m lazy and don’t want to recreate this piece of code for every media player and I also want to be able to use one Vue component for every media player.

Does anybody know if it’s possible to create a button in a Vue app which calls the HA services list (already figured this out) (1) saves this list in a JSON file (2) loops over this list to (3) dynamically create my layout?

I know this is a big question, and I’m not necessarily asking to help me out with writing all of this. I would be very happy with somebody pointing me towards the right tutorials, plugins or parts of Vue.

Thanks in advance!

2

Development’s description is

Discuss the Home Assistant core and platforms. Visit the Documentation to get started.

This should probably go in Third party integrations. Also I know in plain old JS, you could improve the function to just take an argument instead of having an entity hard-coded.