VueScreen

A Vue plugin that provides reactive window size and media query states. Supports your favourite UI framework grid breakpoints out of the box, and can be configured with any custom breakpoints.

Features

• reactive and debounced window innerWidth and innerHeight
• reactive media query states
• detect touch screen capability
• breakpoints for most common ui frameworks provided out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI
• SSR compatible

Requirements

Vue 2.6+

Installation

Embed directly as a script:

<script src=""></script>

When embedding, the script automatically registers itself as a Vue plugin.

Via npm:

npm i vue-screen

import Vue from 'vue';
import VueScreen from 'vue-screen' ;

Vue.use(VueScreen);

Configuration

Use default breakpoints from one of the supported UI frameworks:

Tailwind (default)

Vue.use(VueScreen); 

Vue.use(VueScreen, 'tailwind'); 

Bootstrap

Vue.use(VueScreen, 'bootstrap'); 

Bulma

Vue.use(VueScreen, 'bulma'); 

Foundation

Vue.use(VueScreen, 'foundation'); 

Materialize

Vue.use(VueScreen, 'materialize'); 

Semantic UI

Vue.use(VueScreen, 'semantic-ui'); 

Provide custom breakpoints:

Vue.use(VueScreen, {
    sm: 480, // will be converted to 480px
    md: '47em',
    lg: '1200px',
}); 

Usage

After registering, the new property $screen will be injected on the Vue prototype. You can access it in every component using this.$screen

Available properties on the $screen object:

width

Number
Equivalent to window.innerWidth

height

Number
Equivalent to window.innerHeight

touch

Boolean
Tells if touch events are supported

<breakpoint key>

Boolean
Every breakpoint key specified in the configuration will be available as a boolean value indicating if the corresponding media query matches.

To view default breakpoint keys and values for each framework, click here.