So you don't want to use Hot Module reloading?

I don't know if you're aware, but the usual way to deal with "3rd party" backend API servers is to still use the dev-server, and proxy API requests through it to the API backend.

That way, you usually get the best of both worlds: A fully featured dev server with Hot module reloading for your frontend app, and your own instance of the backend server to go with it

However if you still want this, I think this would be a good feature to implement with a plugin, as I don't think this is a prime use case with this this tmplate.

I doubt Phoenix's HMR is the same web webpack-dev-server (WDS)'s - the former probably reloads the page when a new js bundle is delivered, while the latter has fine-grained HMR that preserves application state.

Also, since WDS performs compilation in memory, it should also result in faster dev builds than writing the whole bundle to disk on every change (and then waiting for that to be picked up by Phoenix).

Running Phoenix and WDS side by side is actually the recommended approach, and it isn't that complex: you just need to specify your phoenix server's local address in vue.config.js as devServer.proxy, and the dev server can automatically figure out what requests to proxy in most cases: https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

If my index.html is like this (requires the server to render it)
DEMO:

<script>
window._ServerData = _SERVER_REPLACE_;
</script>

Need npm run watch
Or are there other recommendations?

Please use the forum for support.

forum.vuejs.org