This branch is for version 1.x, switch to master branch for the latest docs.
<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
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4