Nuxt ssr screen size

Get easy and reactive access to the width and height of your screen.

Version: 1.0.0 Updated: 03/21/2020

By: promosis License: MIT


Get easy and reactive access to the width and height of your screen.

nuxt-ssr-screen-size and vue-screen-size

It is well known that the screen dimensions cannot be determined from the CLI or SSR, for that same reason when this script is run from a server environment it will be given default width and height values (1024 x 768), and in the In case of being executed from the client, the corresponding dimensions will be shown with their respective reactivity.

Relax and forget about the message "the window is not defined"

alt text

View demo

View on npm

View on GitHub


# npm
npm i github:hugojerez/nuxt-ssr-screen-size


Sometimes when building an app you need to have access to the screen's dimensions. Usually that's going to be done in the css using @media - but sometimes you need to access that info right in your JavaScript.

The issue with this is you have to worry about adding event listeners and then removing them later. We wanted to just be able to import something quickly and then be able to forget about it later. So this mixin does just that - just use Vue.use() or mixins: [], and you're off.

There is something to consider - where and how you include this library. There are two ways, make sure to be aware of the differences:

In this usage - your whole app - and every child component - has access to the $vssWidth, $vssHeight, and $vssEvent variables. This is sorta pollutive though, as multiple instances of the mixin are initialized and it's kinda wasteful. The is due to the way Vue mixins are passed down to child components. You can read more about this here. The second example is recommended.

import NuxtSSRScreenSize from 'nuxt-ssr-screen-size'

// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` anywhere in your app.

In this usage - the component you install it on will have access to the $vssWidth, $vssHeight, and $vssEvent variables. This may be a bit more restrictive, but it's less wasteful and should give you better performance.

import NuxtSSRScreenSize from 'nuxt-ssr-screen-size'

export default {
    mixins: [NuxtSSRScreenSize.NuxtSSRScreenSizeMixin],

// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` in your component.


name type description
$vssWidth Number The width of your screen
$vssHeight Number The height of your screen
$vssEvent Object The event object data from the resizing event.


method parameters description
$vssDestroyListener none Force the removal of the attached event listener


# install dependencies
npm install

# serve with hot reload
npm run watch

# run the tests
npm run test

# build demo page
npm run build:example

# build
npm run build

# publish to npm
npm publish


Go ahead and fork the project! Submit an issue if needed. Have fun!



Packaged with a mixture of vue-lib-template and vue-sfc-rollup.

Categories: Vue js