vue-no-ssr

What is vue-no-ssr?

The vue-no-ssr package is a Vue.js component that allows you to conditionally render parts of your application only on the client-side, effectively preventing server-side rendering (SSR) for those parts. This is particularly useful for components that rely on browser-specific APIs or need to access the window or document objects.

What are vue-no-ssr's main functionalities?

Client-Side Only Rendering

This feature allows you to wrap any content inside the <no-ssr> component to ensure it is only rendered on the client-side. This is useful for components that depend on browser-specific features.

<template>
  <div>
    <no-ssr>
      <p>This content will only be rendered on the client-side.</p>
    </no-ssr>
  </div>
</template>

<script>
import NoSSR from 'vue-no-ssr';

export default {
  components: {
    NoSSR
  }
};
</script>

Fallback Content

You can provide fallback content that will be displayed while the client-side content is being loaded. This is useful for improving the user experience by showing a loading indicator or placeholder.

<template>
  <div>
    <no-ssr placeholder="<p>Loading...</p>">
      <p>This content will only be rendered on the client-side.</p>
    </no-ssr>
  </div>
</template>

<script>
import NoSSR from 'vue-no-ssr';

export default {
  components: {
    NoSSR
  }
};
</script>

Other packages similar to vue-no-ssr

vue-client-only

The vue-client-only package provides similar functionality to vue-no-ssr by allowing you to conditionally render components only on the client-side. It is a lightweight alternative and is often recommended for Vue 3 projects. Unlike vue-no-ssr, vue-client-only is specifically designed for Vue 3 and offers a more modern API.

react-no-ssr

The react-no-ssr package offers similar functionality for React applications. It allows you to conditionally render components only on the client-side, preventing them from being rendered during server-side rendering. This package is useful for React developers who need to handle client-specific rendering logic.

README

vue-no-ssr

Install

yarn add vue-no-ssr

Usage

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

<script>
  import NoSSR from 'vue-no-ssr'

  export default {
    components: {
      'no-ssr': NoSSR
    }
  }
</script>

Note that <no-ssr /> can only contain at most ONE child component/element.

Placeholder

Use a component or text as placeholder until <no-ssr /> is mounted on client-side.

eg, show a loading indicator.

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

<script>
  import NoSSR from 'vue-no-ssr'

  export default {
    data() {
      return {
        Loading: require('./Loading.vue')
      }
    },
    components: {
      'no-ssr': NoSSR
    }
  }
</script>

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-no-ssr © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin