{"id":14271,"library":"vue-client-only","title":"Vue Client-Only Component","description":"vue-client-only is a Vue 2 component designed to conditionally render child components exclusively on the client-side, bypassing server-side rendering (SSR). This is particularly useful for integrating third-party libraries or components that rely on browser APIs, making them incompatible with SSR environments. The current stable version is 2.1.0, released in June 2021. The project has an infrequent release cadence, with the last major update (v2.0.0) in 2019 renaming the component from `<no-ssr>` to `<client-only>`. Its primary differentiation lies in its simplicity for isolating client-only code within a Vue 2 application, offering a slot or prop for a placeholder during SSR. It provides basic client-side rendering capabilities without requiring complex SSR configurations.","status":"maintenance","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-client-only","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-client-only","lang":"bash","label":"npm"},{"cmd":"yarn add vue-client-only","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-client-only","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the Vue component itself. Requires Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"ClientOnly is a default export from the package, not a named export. Ensure you import it directly as the default.","wrong":"import { ClientOnly } from 'vue-client-only'","symbol":"ClientOnly","correct":"import ClientOnly from 'vue-client-only'"},{"note":"When using CommonJS, access the default export via the `.default` property for modules that primarily export with `export default`.","wrong":"const ClientOnly = require('vue-client-only')","symbol":"ClientOnly (CommonJS)","correct":"const ClientOnly = require('vue-client-only').default"},{"note":"Prior to v2.0.0, the component was named `NoSsr`. This was a breaking change; update your imports and component tags.","wrong":"import NoSsr from 'vue-client-only'","symbol":"ClientOnly (old name)","correct":"import ClientOnly from 'vue-client-only'"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>My SSR-Friendly Website</h1>\n    <!-- This content will be rendered on the server and client -->\n    <p>Welcome to our site!</p>\n\n    <client-only>\n      <!-- The 'Comments' component below relies on browser APIs (e.g., localStorage or window) -->\n      <!-- and should only be rendered on the client-side to prevent SSR errors. -->\n      <comments-component />\n      \n      <!-- You can provide a placeholder to display during SSR until the client-side component mounts. -->\n      <template #placeholder>\n        <div class=\"loading-placeholder\">Loading comments...</div>\n      </template>\n    </client-only>\n\n    <client-only placeholder=\"Loading ads...\" placeholder-tag=\"span\">\n      <!-- An ad component that fetches client-side data -->\n      <ad-component />\n    </client-only>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import ClientOnly from 'vue-client-only';\n  // Assume these components are defined elsewhere and require client-side execution\n  import CommentsComponent from './components/CommentsComponent.vue';\n  import AdComponent from './components/AdComponent.vue';\n\n  export default defineComponent({\n    name: 'App',\n    components: {\n      ClientOnly,\n      CommentsComponent,\n      AdComponent\n    }\n  });\n</script>\n\n<style>\n.loading-placeholder {\n  font-style: italic;\n  color: #888;\n}\n</style>","lang":"typescript","description":"Demonstrates importing and using the ClientOnly component with both slot-based and prop-based placeholders, highlighting its use case for isolating client-side components in an SSR application."},"warnings":[{"fix":"Replace all `<no-ssr>` tags with `<client-only>` and update any CSS targeting `.no-ssr-placeholder` to target `.client-only-placeholder`.","message":"The component was renamed from `<no-ssr>` to `<client-only>` in v2.0.0. All instances of the old component tag and its associated CSS class must be updated.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update your CSS selectors to use `.client-only-placeholder` instead of `.no-ssr-placeholder` for styling the SSR placeholder.","message":"The placeholder CSS class name changed from `no-ssr-placeholder` to `client-only-placeholder` with the v2.0.0 release.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If migrating to Vue 3, assess if your framework (e.g., Nuxt 3, VitePress) offers a native `<ClientOnly>` component. Otherwise, investigate alternative Vue 3-compatible solutions for conditional client-side rendering.","message":"This package is primarily designed for Vue 2 applications. There is no official Vue 3 compatible version, and direct usage in Vue 3 projects may lead to unexpected behavior or require compatibility layers. For Vue 3, consider using built-in `<ClientOnly>` components provided by frameworks like Nuxt 3 or VitePress.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Verify `\"typeRoots\": [\"./node_modules/@types\", \"./types\"]` or similar is correctly configured in your `tsconfig.json` and ensure `\"allowSyntheticDefaultImports\": true` might be needed for default exports if using certain module setups.","message":"While v2.1.0 added TypeScript types, ensure your project's `tsconfig.json` includes `node_modules` or explicitly includes types for `vue-client-only` if you encounter type resolution issues.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"Choose one method for providing placeholder content. For rich HTML, use the `#placeholder` slot. For simple text, the `placeholder` prop is sufficient. Be aware of the precedence order.","message":"Placeholder content can be provided via a named slot (`#placeholder`) or the `placeholder` prop. If both are present, the slot takes precedence.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"search_vec":"'2':13,102 '2.1.0':61 '2019':80 '2021':65 'api':49 'applic':103 'basic':116 'browser':48 'bypass':27 'cadenc':72 'capabl':121 'child':19 'client':3,8,25,96,118 'client-on':2,95 'client-sid':24,117 'code':98 'complex':124 'compon':5,14,20,44,83 'condit':17 'configur':126 'current':57 'design':15 'differenti':88 'environ':55 'exclus':21 'incompat':52 'infrequ':70 'integr':38 'isol':94 'javascript':127 'june':64 'last':75 'librari':42 'lie':89 'major':76 'make':50 'offer':104 'parti':41 'particular':35 'placehold':111 'primari':87 'project':67 'prop':108 'provid':115 'releas':62,71 'reli':46 'renam':81 'render':18,31,120 'requir':123 'server':29 'server-sid':28 'side':26,30,119 'simplic':92 'slot':106 'ssr':32,54,113,125 'stabl':58 'third':40 'third-parti':39 'typescript':128 'updat':77 'use':36 'v2.0.0':78 'version':59 'vue':1,7,12,101 'vue-client-on':6 'within':99 'without':122","created_at":"2026-04-20T01:58:50.366086+00:00","updated_at":"2026-04-20T01:58:50.366086+00:00","problems":[{"fix":"Update all instances of `<no-ssr>` in your templates to `<client-only>`.","cause":"Attempting to use the old component name `<no-ssr>` after upgrading to `vue-client-only` v2.0.0 or later.","error":"Failed to resolve component: no-ssr"},{"fix":"Ensure `import ClientOnly from 'vue-client-only'` is used and `ClientOnly` is listed in the `components` option of your Vue component.","cause":"The `ClientOnly` component was not properly imported and registered in the parent component or globally.","error":"[Vue warn]: Unknown custom element: <client-only> - did you register the component correctly?"},{"fix":"Change your import statement to `import ClientOnly from 'vue-client-only';`","cause":"Incorrect TypeScript import for the `ClientOnly` component, treating a default export as a named export.","error":"Property 'ClientOnly' does not exist on type 'typeof import(\".../node_modules/vue-client-only/dist/client-only\")'. Did you forget to use 'default'?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/egoist/vue-client-only","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-client-only","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}