I have some desktop/mobile specific parts of template code, something like:
<div v-if="!isMobile">
{{ Show something desktop specific }}
</div>
<div v-if="isMobile">
{{ Show something mobile specific }}
</div>
isMobile is a variable stored inside vuex.
For device detection I use nuxtjs/device.
The problem: if I simultaneously open desktop and mobile versions, rendered html is mixed, ie desktop version shows desktop page + mobile specific things and mobile version shows mobile page + desktop specific things.
I initially thought that the problem somewhere inside Nginx (probably with cache part), but I simply checked "npm run start" and found that this issue is nuxt (or node) specific.
Current production server structure:
-> nginx-proxy (1 container)
-> nginx with LetsEncrypt certificates and per domain cache (1 container)
-> node with attached nuxt code that runs "npm run start" (5 containers, one per domain).
For now the easiest way I know is to have a separate docker containers for desktop and mobile versions, but right now I already have 5 containers for 5 different domains (which receive specific settings via API) and in the future the amount of domains will grow, so if possible I would like to avoid to have 2 containers (mobile/desktop) per domain.
Is there a way to keep one container for desktop and mobile versions? Maybe I misconfigured something?