Nuxt SSR - The client-side rendered virtual DOM tree is not matching server-rendered content

[vin-ni]

I get that error when using plyr in a component.

Unfortunately this forces a full client side render of the page. Any ideas how this could be fixed?

Full Error: [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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

My implementation:

    <div v-if="videoplayer" class="plyr-video-wrapper">
      <vue-plyr ref="plyr">
        <video controls crossorigin playsinline :data-poster="poster">
          <source :src="videoHighRes.url" type="video/mp4" />
        </video>
      </vue-plyr>
    </div>

Thank you!

[zpzyyzp]

https://github.com/redxtech/vue-plyr/issues/443#issuecomment-895682966 Maybe this will help you.

[vin-ni]

I will test it. Thanks!

[vin-ni]

<client-only> solves it, but is rather a hack i believe. How could I do true ssr? It seems it used to work some time. The demos are also broken though.

[lustremedia]

I ran into the same issue with the newer 7.0 version. 6 was not giving me that error, plus the css build process is not working, so I am just not going to use this module any longer ... :-(