v-if breaks nuxt ssr v-if breaks nuxt ssr vue.js vue.js

v-if breaks nuxt ssr


For anyone facing the same problem, I have fixed it by setting cache-and-network after the mount and all works just fine.

mounted() {  this.$apollo.queries.getCampaign.setOptions({    fetchPolicy: 'cache-and-network',  })}


You are trying to make the root element of a component conditionnally disappear, which creates an inconsistency in the virtual DOM.

Can you try:

<template>  <div>    <template v-if="test">      {{ test }}    </template>  </div></template>


SSR is sometimes difficult to debug and such problems occure quite often.

https://ssr.vuejs.org/#why-ssr

some external libraries may need special treatment to be able to runin a server-rendered app.

This may be the point. Some vue-components cannot be run via SSR out of the box. This is why I asked about the content from the server.

So the easiest fix could be to wrap your component with the <no-ssr> tag. You can do this for each component separatly to find out which one causes the problem.Once you have isolated the component you can keep the <no-ssr> tag on it and migrate it's functions to the mounted area of your client component.