Vue Nuxt ‐ Known gotchas

Dynamic components and SSR

Unfortunately, it would seem that if you need to use a web component as part of a dynamic component in Vue, the component will only be correctly rendered after hydration on the client. This does not cause SSR errors. However, it will mean the initial HTML returned from the server does not show the component.

Here is an example:

<div class="icon-container">
  <component v-for="icon in icons" :key="icon" :is="icon" /> <!-- This will not render until hydration on the client -->
  <icon-search></icon-search> <!-- This is a web component that will render during SSR -->
</div>