A
A
arturminsksum2017-08-08 07:17:22
Vue.js
arturminsksum, 2017-08-08 07:17:22

Render warning when using v-if v-else in VueJS - NuxtJS (SSR)?

I use a simple component to display a logo with or without a link, depending on whether we are on the main page or not

<template lang="pug">
  nuxt-link(v-if="!isMain"  to="/")
    os-svg(name="logo")
  os-svg(v-else name="logo")
</template>

when starting a local server and navigating through the pages, everything is fine, but when opening the /about page directly from the address bar or when reloading the page, it throws a warning
vue.runtime.esm.js:430 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render.
In os-svg lies
<template lang="pug">
  svg.svg(:width="width", :height="height")
    use(:xlink:href="'#'+name")
</template>

That you can't use v-if v-else in NUXT (i.e. SRR) at all?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question