Package Exports

vue-no-ssr

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-no-ssr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-no-ssr

Install

yarn add vue-no-ssr

Usage

<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>

Placeholder

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" placeholader-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.

Development

yarn install

# Run example
yarn example

Contributing

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

Author

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