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?