{"_id":"vue-client-only","_rev":"1514638","name":"vue-client-only","description":"Vue component to wrap non SSR friendly components","dist-tags":{"latest":"2.1.0"},"maintainers":[{"name":"egoist","email":"0x142857@gmail.com"}],"time":{"modified":"2021-11-10T06:20:26.000Z","created":"2019-06-25T07:01:48.879Z","2.1.0":"2021-06-03T09:46:51.056Z","2.0.0":"2019-06-25T07:01:48.879Z"},"users":{},"author":{"name":"egoist","email":"0x142857@gmail.com"},"repository":{"url":"git+https://github.com/egoist/vue-client-only.git","type":"git"},"versions":{"2.1.0":{"name":"vue-client-only","version":"2.1.0","description":"Vue component to wrap non SSR friendly components","repository":{"url":"git+https://github.com/egoist/vue-client-only.git","type":"git"},"main":"dist/vue-client-only.common.js","unpkg":"dist/vue-client-only.min.js","types":"types/index.d.ts","scripts":{"types":"dtslint --localTs node_modules/typescript/lib types","test":"echo 'no tests!' && npm run lint","lint":"xo","build":"npm run build:cjs && npm run build:umd","build:cjs":"FORMAT=cjs bili","build:umd":"FORMAT=umd bili","prepublish":"npm run build","example":"poi"},"poi":{"entry":"example/index.js","dist":"example/dist"},"author":{"name":"egoist","email":"0x142857@gmail.com"},"license":"MIT","dependencies":{},"devDependencies":{"bili":"^0.16.0-rc.1","dtslint":"^4.1.0","eslint-config-rem":"^3.0.0","poi":"^9.3.1","tsd":"^0.16.0","typescript":"^4.3.2","vue":"^2.6.13","xo":"^0.18.0"},"xo":{"extends":"rem/prettier","ignores":["example/**"]},"gitHead":"9b9da32082bc4bc60294e3db026a39622060c1cd","bugs":{"url":"https://github.com/egoist/vue-client-only/issues"},"homepage":"https://github.com/egoist/vue-client-only#readme","_id":"vue-client-only@2.1.0","_nodeVersion":"16.2.0","_npmVersion":"7.15.1","dist":{"shasum":"1a67a47b8ecacfa86d75830173fffee3bf8a4ee3","size":3538,"noattachment":false,"key":"/vue-client-only/-/vue-client-only-2.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/vue-client-only/download/vue-client-only-2.1.0.tgz"},"_npmUser":{"name":"egoist","email":"0x142857@gmail.com"},"directories":{},"maintainers":[{"name":"egoist","email":"0x142857@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-client-only_2.1.0_1622713610901_0.14619260191125028"},"_hasShrinkwrap":false,"publish_time":1622713611056,"_cnpm_publish_time":1622713611056},"2.0.0":{"name":"vue-client-only","version":"2.0.0","description":"Vue component to wrap non SSR friendly components","repository":{"url":"git+https://github.com/egoist/vue-client-only.git","type":"git"},"main":"dist/vue-client-only.common.js","unpkg":"dist/vue-client-only.min.js","scripts":{"test":"echo 'no tests!' && npm run lint","lint":"xo","build":"npm run build:cjs && npm run build:umd","build:cjs":"FORMAT=cjs bili","build:umd":"FORMAT=umd bili","prepublish":"npm run build","example":"poi"},"poi":{"entry":"example/index.js","dist":"example/dist"},"author":{"name":"egoist","email":"0x142857@gmail.com"},"license":"MIT","dependencies":{},"devDependencies":{"bili":"^0.16.0-rc.1","eslint-config-rem":"^3.0.0","poi":"^9.3.1","xo":"^0.18.0"},"xo":{"extends":"rem/prettier","ignores":["example/**"]},"gitHead":"15128f5f902a1a94316e5c55f722233dbcdd5f1f","bugs":{"url":"https://github.com/egoist/vue-client-only/issues"},"homepage":"https://github.com/egoist/vue-client-only#readme","_id":"vue-client-only@2.0.0","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"ddad8d675ee02c761a14229f0e440e219de1da1c","size":3352,"noattachment":false,"key":"/vue-client-only/-/vue-client-only-2.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/vue-client-only/download/vue-client-only-2.0.0.tgz"},"maintainers":[{"name":"egoist","email":"0x142857@gmail.com"}],"_npmUser":{"name":"egoist","email":"0x142857@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-client-only_2.0.0_1561446108761_0.40884311322078504"},"_hasShrinkwrap":false,"publish_time":1561446108879,"_cnpm_publish_time":1561446108879}},"readme":"# vue-client-only\n\n[![NPM version](https://img.shields.io/npm/v/vue-client-only.svg?style=flat)](https://npmjs.com/package/vue-client-only) [![NPM downloads](https://img.shields.io/npm/dm/vue-client-only.svg?style=flat)](https://npmjs.com/package/vue-client-only) [![CircleCI](https://circleci.com/gh/egoist/vue-client-only/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-client-only/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)\n\n## Install\n\n```bash\nyarn add vue-client-only\n```\n\n> __This project is previously known as *vue-no-ssr*, switch to [1.x](https://github.com/egoist/vue-client-only/tree/1.x) branch for the old docs.__\n\n## Usage\n\n```vue\n<template>\n  <div id=\"app\">\n    <h1>My Website</h1>\n    <client-only>\n      <!-- this component will only be rendered on client-side -->\n      <comments />\n    </client-only>\n  </div>\n</template>\n\n<script>\n  import ClientOnly from 'vue-client-only'\n\n  export default {\n    components: {\n      ClientOnly\n    }\n  }\n</script>\n```\n\n### Placeholder\n\nUse a slot or text as placeholder until `<client-only />` is mounted on client-side.\n\neg, show a loading indicator.\n\n```vue\n<template>\n  <div id=\"app\">\n    <h1>My Website</h1>\n    <!-- use slot -->\n    <client-only>\n      <comments />\n      <comments-placeholder slot=\"placeholder\" />\n    </client-only>\n    <!-- or use text -->\n    <client-only placeholder=\"Loading...\">\n      <comments />\n    </client-only>\n  </div>\n</template>\n\n<script>\n  import ClientOnly from 'vue-client-only'\n\n  export default {\n    components: {\n      ClientOnly\n    }\n  }\n</script>\n```\n\nBy default the placeholder will be wrapped in a `div` tag, however you can use `placeholderTag` prop to customize it:\n\n```vue\n<client-only placeholder=\"loading\" placeholder-tag=\"span\">\n  <comments />\n</client-only>\n```\n\nAnd you get:\n\n```html\n<span class=\"client-only-placeholder\">\n  loading\n</span>\n```\n\nIf prop `placeholder` is an empty string (or `null`) and no `placeholder`\nslot is found, then `<client-only>` will render the Vue placeholder element `<!---->`\ninstead of rendering the `placholder-tag` during SSR render.\n\n## Development\n\n```bash\nyarn install\n\n# Run example\nyarn example\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n\n## Author\n\n**vue-client-only** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>\nAuthored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-client-only/contributors)).\n\n> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)\n","_attachments":{},"homepage":"https://github.com/egoist/vue-client-only#readme","bugs":{"url":"https://github.com/egoist/vue-client-only/issues"},"license":"MIT"}