The <no-ssr> Component

This component is used to purposely remove the component from the subject of server side rendering.

Props:

  • placeholder: string
    • Use a text as placeholder until <no-ssr /> is mounted on client-side.
<template>
  <div>
    <sidebar />
    <no-ssr placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </no-ssr>
  </div>
</template>

Slots:

  • placeholder:

    • Use a slot as placeholder until <no-ssr /> is mounted on client-side.
    <template>
    <div>
      <sidebar />
      <no-ssr>
        <!-- this component will only be rendered on client-side -->
        <comments />
    
        <!-- loading indicator -->
        <comments-placeholder slot="placeholder" />
      </no-ssr>
    </div>
    </template>

Note that <no-ssr /> can only contain at most ONE child component/element.

This component is a clone of egoist/vue-no-ssr. Thanks @egoist!

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!