1. ssr-window
Better handling for window object in SSR environment
ssr-window
Package: ssr-window
Created by: nolimits4web
Last modified: Wed, 18 May 2022 14:14:40 GMT
Version: 4.0.2
License: MIT
Downloads: 5,018,491
Repository: https://github.com/nolimits4web/ssr-window

Install

npm install ssr-window
yarn add ssr-window

SSR Window

Better handling for window and document object in SSR environment.

This library doesn't implement the DOM (like JSDOM), it just patches (or creates window and document objects) to avoid them to fail (throw errors) during server-side rendering.

Was created for use in:

Installation

Library available on NPM:

npm i ssr-window

Usage

 import { window, document } from 'ssr-window';

window.addEventListener('resize', () => {});

const div = document.querySelectorAll('div');

Extending

If you rely on some window/document properties which are not included here, you can use extend helper to add them:

 import { window, document, extend } from 'ssr-window';

// add window.navigator.language
extend(window, {
  navigator: {
    language: 'en',
  },
});

// add document.body
extend(document, {
  body: {
    /* ... */
  },
});

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin