I have the following setup:
I have two prebuilt VueJs apps under those URLs (dev + prod) served through Apache :
https://dev-domain.com/web
https://prod-domain.com/kiosk
These are general VueJs apps that need to include the same games implemented in VueJs and have them embedded
I have a backend implementation that serves a single file vuejs game that was built like:
yarn vue-cli-service build --target wc --name game ./src/components/Game.vue
and will be served like:
https://dev-domain.com/assets/games/{id}/game.js
https://prod-domain.com/assets/games/{id}/game.js
I have an endpoint for saving progress of a player on each game e.g:
https://dev-domain.com/api/v1/games/{id}/save
https://prod-domain.com/api/v1/games/{id}/save
Each time, different games are active based on current date - so I don't know the actual urls of the game assets to be fetched beforehand. I will be asking my backend api to see which ones are active like this:
https://dev-domain.com/api/v1/games/active
https://prod-domain.com/api/v1/games/active
I am looking into http-vue-loader, Distributed Vue.js Applications Part 1: Loading Components via HTTP, How to Implement Dynamic Components on Vuejs and other options but I am not sure if it is possible to have dynamic URLs. Also I don't know what is the best way to approach this problem.
How can this be implemented in the simplest possible way?
