{"id":12535,"library":"vue-no-ssr","title":"Vue No SSR","description":"Vue No SSR was a component designed for Vue.js applications utilizing Server-Side Rendering (SSR) to wrap components that should only be rendered on the client side. Its primary function was to prevent hydration mismatches and allow browser-specific code or libraries to function correctly without causing errors during the SSR build process. The package's last version under this name was 1.1.1, released in early 2019. It was succeeded by `vue-client-only` in its 2.0.0 release, which is actively maintained. This component provided a simple API, allowing for fallback content (placeholders) to be displayed during SSR until the client-side component was mounted. It solved a common problem in isomorphic Vue applications where certain elements or third-party libraries are not compatible with Node.js environments.","status":"renamed","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-no-ssr","tags":["javascript"],"install":[{"cmd":"npm install vue-no-ssr","lang":"bash","label":"npm"},{"cmd":"yarn add vue-no-ssr","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-no-ssr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as a Vue component library.","package":"vue","optional":false}],"imports":[{"note":"This imports the default export of the 'vue-no-ssr' package, which is the component itself. For Vue 2, you typically register it globally or locally in `components`.","wrong":"import { NoSSR } from 'vue-no-ssr'","symbol":"NoSSR","correct":"import NoSSR from 'vue-no-ssr'"},{"note":"The component is intended to be used with the tag name `<no-ssr>` in templates, requiring an alias in the `components` option if imported as `NoSSR`.","wrong":"<script>\nimport { NoSSR } from 'vue-no-ssr';\nexport default {\n  components: {\n    NoSSR\n  }\n}\n</script>","symbol":"NoSSR Component Registration","correct":"<script>\nimport NoSSR from 'vue-no-ssr';\nexport default {\n  components: {\n    'no-ssr': NoSSR\n  }\n}\n</script>"},{"note":"Wrap any component that should only render on the client-side within the `<no-ssr>` tags. You can also provide a `placeholder` slot or prop.","symbol":"Usage in template","correct":"<template>\n  <no-ssr>\n    <MyClientOnlyComponent />\n  </no-ssr>\n</template>"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>My SSR-enabled Website</h1>\n    <no-ssr placeholder=\"Loading client-only content...\">\n      <!-- This component might use browser-specific APIs or be incompatible with Node.js -->\n      <MyClientOnlyComponent />\n      <template v-slot:placeholder>\n        <p>This content is client-only: Loading...</p>\n      </template>\n    </no-ssr>\n    <p>This content is always visible (SSR and client).</p>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport NoSSR from 'vue-no-ssr';\n\n// A dummy component that would typically rely on client-side APIs\nconst MyClientOnlyComponent = Vue.component('MyClientOnlyComponent', {\n  template: '<div>Hello from the client! (Window width: {{ windowWidth }})</div>',\n  data() {\n    return { windowWidth: 0 };\n  },\n  mounted() {\n    if (typeof window !== 'undefined') {\n      this.windowWidth = window.innerWidth;\n      window.addEventListener('resize', this.updateWidth);\n    }\n  },\n  beforeDestroy() {\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('resize', this.updateWidth);\n    }\n  },\n  methods: {\n    updateWidth() {\n      this.windowWidth = window.innerWidth;\n    }\n  }\n});\n\nexport default {\n  name: 'App',\n  components: {\n    'no-ssr': NoSSR,\n    MyClientOnlyComponent\n  }\n};\n</script>\n\n<style>\nbody { font-family: sans-serif; }\n</style>","lang":"javascript","description":"This example demonstrates how to use the `<no-ssr>` component to wrap `MyClientOnlyComponent`, which simulates a browser-dependent component. It shows both the `placeholder` prop and a `v-slot:placeholder` for fallback content while the main component awaits client-side hydration."},"warnings":[{"fix":"Migrate to `vue-client-only` by installing `npm install vue-client-only`, then replace all instances of `<no-ssr>` with `<client-only>` and `no-ssr-placeholder` with `client-only-placeholder`.","message":"The `vue-no-ssr` package and its component `<no-ssr>` were officially renamed to `vue-client-only` and `<client-only>` respectively in `vue-client-only@2.0.0`.","severity":"breaking","affected_versions":">=2.0.0 (of the successor package)"},{"fix":"Update any custom CSS targeting `.no-ssr-placeholder` to target `.client-only-placeholder` instead after upgrading to `vue-client-only`.","message":"The default CSS class name for the placeholder element changed from `no-ssr-placeholder` to `client-only-placeholder` in `vue-client-only@2.0.0`.","severity":"breaking","affected_versions":">=2.0.0 (of the successor package)"},{"fix":"If using TypeScript, consider upgrading to `vue-client-only@2.1.0` or higher, which introduced official TypeScript types. For `vue-no-ssr`, you might need to add a `declarations.d.ts` file with `declare module 'vue-no-ssr';`.","message":"This package (`vue-no-ssr`) does not provide official TypeScript types. While it can be used in TypeScript projects, you may need to declare types manually or rely on `any`.","severity":"gotcha","affected_versions":"<2.1.0 (of the successor package)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `NoSSR` is correctly imported and registered: `import NoSSR from 'vue-no-ssr'; export default { components: { 'no-ssr': NoSSR } }`.","cause":"The `<no-ssr>` component was imported but not registered in the Vue component's `components` option.","error":"Failed to mount component: template or render function not defined."},{"fix":"Verify that `NoSSR` is correctly imported and registered in the `components` option, and that the tag used in the template matches the registered name (e.g., `'no-ssr'`).","cause":"The Vue instance cannot find the `<no-ssr>` component, often due to incorrect registration or a typo in the tag name.","error":"[Vue warn]: Unknown custom element: <no-ssr> - did you register the component correctly?"}],"ecosystem":"npm"}