Package Exports
- vue-no-ssr
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-no-ssr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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>
Placeholder
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.
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