peach a19a732be8 commit message | 2 jaren geleden | |
---|---|---|
.. | ||
dist | 2 jaren geleden | |
LICENSE | 2 jaren geleden | |
README.md | 2 jaren geleden | |
package.json | 2 jaren geleden |
yarn add vue-no-ssr
<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" 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.
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