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

There are following steps through that we can Get easy and reactive access to the width and height of your screen

Table of Contents

About Vue.js library

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:

Install

# npm
npm i vue-screen-size

# yarn
yarn add vue-screen-size

Or you can include it through the browser at the bottom of your page:

<script src="https://unpkg.com/vue-screen-size/dist/vue-screen-size.min.js"></script>

Usage Example 1 – Whole app has access (Not Recommended)

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 VueScreenSize from 'vue-screen-size'
Vue.use(VueScreenSize)

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

Usage Example 2 – Just the component you install it on has access – (Recommended)

import VueScreenSize from 'vue-screen-size'

export default {
    ...
    mixins: [VueScreenSize.VueScreenSizeMixin],
    ...
}

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

Variables

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.

Variables

Methods

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

methods

Development

# 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

Demo

Full project