node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

vue-no-ssr

vue-no-ssr

NPM version NPM downloads CircleCI donate

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>

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

Placeholder

Use a component 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>
    <no-ssr :placeholder="Loading">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </no-ssr>
  </div>
</template>
 
<script>
  import NoSSR from 'vue-no-ssr'
 
  export default {
    data() {
      return {
        Loading: require('./Loading.vue')
      }
    },
    components: {
      'no-ssr': NoSSR
    }
  }
</script>

Development

yarn install
 
# Run example 
yarn example

Contributing

  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

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