Registry / web-framework / vue-client-only

vue-client-only

JSON →
library2.1.0jsnpmunverified

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.

web-framework
npm install vue-client-only
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-CLIENT-ONLY
V
vue-client-only
web-frameworkjavascriptv2.1.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

ClientOnly
✓ import ClientOnly from 'vue-client-only'
✗ import { ClientOnly } from 'vue-client-only'
ClientOnly is a default export from the package, not a named export. Ensure you import it directly as the default.
ClientOnly (CommonJS)
✓ const ClientOnly = require('vue-client-only').default
✗ const ClientOnly = require('vue-client-only')
When using CommonJS, access the default export via the `.default` property for modules that primarily export with `export default`.
ClientOnly (old name)
✓ import ClientOnly from 'vue-client-only'
✗ import NoSsr from 'vue-client-only'
Prior to v2.0.0, the component was named `NoSsr`. This was a breaking change; update your imports and component tags.

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.

<template> <div id="app"> <h1>My SSR-Friendly Website</h1> <!-- This content will be rendered on the server and client --> <p>Welcome to our site!</p> <client-only> <!-- The 'Comments' component below relies on browser APIs (e.g., localStorage or window) --> <!-- and should only be rendered on the client-side to prevent SSR errors. --> <comments-component /> <!-- You can provide a placeholder to display during SSR until the client-side component mounts. --> <template #placeholder> <div class="loading-placeholder">Loading comments...</div> </template> </client-only> <client-only placeholder="Loading ads..." placeholder-tag="span"> <!-- An ad component that fetches client-side data --> <ad-component /> </client-only> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import ClientOnly from 'vue-client-only'; // Assume these components are defined elsewhere and require client-side execution import CommentsComponent from './components/CommentsComponent.vue'; import AdComponent from './components/AdComponent.vue'; export default defineComponent({ name: 'App', components: { ClientOnly, CommentsComponent, AdComponent } }); </script> <style> .loading-placeholder { font-style: italic; color: #888; } </style>
Debug
Known issues
breakingThe 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.
fix
Replace all `<no-ssr>` tags with `<client-only>` and update any CSS targeting `.no-ssr-placeholder` to target `.client-only-placeholder`.
affects: >=2.0.0
breakingThe placeholder CSS class name changed from `no-ssr-placeholder` to `client-only-placeholder` with the v2.0.0 release.
fix
Update your CSS selectors to use `.client-only-placeholder` instead of `.no-ssr-placeholder` for styling the SSR placeholder.
affects: >=2.0.0
gotchaThis 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.
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.
affects: All versions
gotchaWhile 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.
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.
affects: >=2.1.0
gotchaPlaceholder content can be provided via a named slot (`#placeholder`) or the `placeholder` prop. If both are present, the slot takes precedence.
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.
affects: All versions
Errors
Common errors & fixes
Failed to resolve component: no-ssr
Attempting to use the old component name `<no-ssr>` after upgrading to `vue-client-only` v2.0.0 or later.
fix
Update all instances of `<no-ssr>` in your templates to `<client-only>`.
[Vue warn]: Unknown custom element: <client-only> - did you register the component correctly?
The `ClientOnly` component was not properly imported and registered in the parent component or globally.
fix
Ensure `import ClientOnly from 'vue-client-only'` is used and `ClientOnly` is listed in the `components` option of your Vue component.
Property 'ClientOnly' does not exist on type 'typeof import(".../node_modules/vue-client-only/dist/client-only")'. Did you forget to use 'default'?
Incorrect TypeScript import for the `ClientOnly` component, treating a default export as a named export.
fix
Change your import statement to `import ClientOnly from 'vue-client-only';`
Upgrade
Version history
2.1.0latest on npm
Audit
Dependencies
vuerequiredRuntime dependency for the Vue component itself. Requires Vue 2.x.
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/egoist/vue-client-only ↗
packagehttps://www.npmjs.com/package/vue-client-only ↗
vue-client-only — npm install vue-client-only · libregistry