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