This branch is for version 1.x, switch to master branch for the latest docs.

yarn add vue-no-ssr

<template>
  <div id="app">
    <h1>My Website</h1>
    <no-ssr>
      <!-- this component will only be rendered on client-side -->
      <comments />
    </no-ssr>
  </div>
</template>
<script>
  import NoSSR from 'vue-no-ssr'

  export default {
    components: {
      'no-ssr': NoSSR
    }
  }
</script>

Use a slot or text as placeholder until <no-ssr /> is mounted on client-side.

eg, show a loading indicator.

<template>
  <div id="app">
    <h1>My Website</h1>
    <!-- use slot -->
    <no-ssr>
      <comments />
      <comments-placeholder slot="placeholder" />
    </no-ssr>
    <!-- or use text -->
    <no-ssr placeholder="Loading...">
      <comments />
    </no-ssr>
  </div>
</template>
<script>
  import NoSSR from 'vue-no-ssr'

  export default {
    components: {
      'no-ssr': NoSSR
    }
  }
</script>

By default the placeholder will be wrapped in a div tag, however you can use placeholderTag prop to customize it:

<no-ssr placeholder="loading" placeholder-tag="span">
  <comments />
</no-ssr>

And you get:

<span class="no-ssr-placeholder">
  loading
</span>

If prop placeholder is an empty string (or null) and no placeholder slot is found, then <no-ssr> will render the Vue placeholder element <!----> instead of rendering the placholder-tag during SSR render.

yarn install
# Run example
yarn example

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

vue-no-ssr © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily