LazyComponent used with SSR results in: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.

[Coletrane]

Hi I'm using vue-lazyload with Nuxt and trying to get lazy-component to work with SSR.

Here is a repo with an example of the issue: https://github.com/Coletrane/vue-lazyload-ssr-lazy-component clone it and run npm run dev

Here is the example component from that repo:

<template>
  <div>
    <div :style="{
      height: '5000px',
      background: 'black'
    }">
    </div>
    <lazy-component @show="handler">
      <div>
        hello I'm really lazy
      </div>
    </lazy-component>
  </div>
</template>
<script>
export default {
  name: "index",
  methods: {
    handler() {
      console.log("lazy being lazy!")
    }
  }
}
</script>
<style scoped>
</style>

[elpeyotl]

Did you use ssr:false? my nuxt config:

plugins: ['~/plugins/helpers',{ src: '~/plugins/lazyload', ssr: false }]

[Coletrane]

@elpeyotl yes https://github.com/Coletrane/vue-lazyload-ssr-lazy-component/blob/master/nuxt.config.js

[kvanska]

@Coletrane did you find a solution for this? I have same problem using nuxt ssr.

[snsxn]

I'm using it inside no-ssr to avoid this