vue-client-only

2.1.0last stable release 4 years ago
Complexity Score
Low
Open Issues
34
Dependent Projects
15
Weekly Downloadsglobal
166,553

License

  • MIT
    • Yesattribution
    • Permissivelinking
    • Permissivedistribution
    • Permissivemodification
    • Nopatent grant
    • Yesprivate use
    • Permissivesublicensing
    • Notrademark grant

Downloads

Readme

vue-client-only

Install

yarn add vue-client-only

This project is previously known as vue-no-ssr, switch to 1.x branch for the old docs.

Usage

<template>
  <div id="app">
    <h1>My Website</h1>
    <client-only>
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

<script>
  import ClientOnly from 'vue-client-only'

  export default {
    components: {
      ClientOnly
    }
  }
</script>

Placeholder

Use a slot or text as placeholder until <client-only /> is mounted on client-side.

eg, show a loading indicator.

<template>
  <div id="app">
    <h1>My Website</h1>
    <!-- use slot -->
    <client-only>
      <comments />
      <comments-placeholder slot="placeholder" />
    </client-only>
    <!-- or use text -->
    <client-only placeholder="Loading...">
      <comments />
    </client-only>
  </div>
</template>

<script>
  import ClientOnly from 'vue-client-only'

  export default {
    components: {
      ClientOnly
    }
  }
</script>

By default the placeholder will be wrapped in a div tag, however you can use placeholderTag prop to customize it:

<client-only placeholder="loading" placeholder-tag="span">
  <comments />
</client-only>

And you get:

<span class="client-only-placeholder">
  loading
</span>

If prop placeholder is an empty string (or null) and no placeholder slot is found, then <client-only> will render the Vue placeholder element <!----> instead of rendering the placholder-tag during SSR render.

Development

yarn install

# Run example
yarn example

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

vue-client-only © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily

Dependencies

No runtime dependency information found for this package.

CVE IssuesActive
0
Scorecards Score
2.10
Test Coverage
No Data
Follows Semver
Yes
Github Stars
474
Dependenciestotal
8
DependenciesOutdated
7
DependenciesDeprecated
0
Threat Modelling
No
Repo Audits
No

Learn how to distribute vue-client-only in your own private NPM registry

npm config set registry  https://npm.cloudsmith.com/owner/repo
Processing...
Done
npm install vue-client-only
Processing...
Done

2 Releases

NPM on Cloudsmith

Getting started with NPM on Cloudsmith is fast and easy.