Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork37
Vue component to wrap non SSR friendly components (428 bytes)
License
egoist/vue-client-only
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
yarn add vue-client-only
This project is previously known asvue-no-ssr, switch to1.x branch for the old docs.
<template> <divid="app"> <h1>My Website</h1> <client-only><!-- this component will only be rendered on client-side--> <comments /> </client-only> </div></template><script>importClientOnlyfrom'vue-client-only'exportdefault { components: { ClientOnly } }</script>
Use a slot or text as placeholder until<client-only /> is mounted on client-side.
eg, show a loading indicator.
<template> <divid="app"> <h1>My Website</h1><!-- use slot--> <client-only> <comments /> <comments-placeholderslot="placeholder" /> </client-only><!-- or use text--> <client-onlyplaceholder="Loading..."> <comments /> </client-only> </div></template><script>importClientOnlyfrom'vue-client-only'exportdefault { components: { ClientOnly } }</script>
By default the placeholder will be wrapped in adiv tag, however you can useplaceholderTag prop to customize it:
<client-only placeholder="loading" placeholder-tag="span"> <comments /></client-only>
And you get:
<spanclass="client-only-placeholder"> loading</span>
If propplaceholder is an empty string (ornull) and noplaceholderslot is found, then<client-only> will render the Vue placeholder element<!---->instead of rendering theplacholder-tag during SSR render.
yarn install# Run exampleyarn example- 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
vue-client-only ©egoist, Released under theMIT License.
Authored and maintained by egoist with help from contributors (list).
egoist.moe · GitHub@egoist · Twitter@_egoistlily
About
Vue component to wrap non SSR friendly components (428 bytes)
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors8
Uh oh!
There was an error while loading.Please reload this page.