VueScreen

Reactive window size and media query states for VueJS. Supports your favourite UI framework grid breakpoints out of the box, and can be configured with any custom breakpoints.

Demo

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 (Nuxt module and Gridsome plugin coming soon)

Requirements

As the library uses Vue.Observable API internally, Vue 2.6+ is required.

Installation

Embed directly as a script:

<script src="https://unpkg.com/vue-screen/dist/vue-screen.min.js"></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',
}); 

You can find default UI framework breakspoints here

Basic usage

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

In a template

<template>
    <div>
        <p>Page width is {{ $screen.width }} px</p>
        <p>Page height is {{ $screen.height }} px</p>
    </div>
</template>

As computed properties

<template>
    <div :class="media">
        <p>VueScreen</p>
    </div>
</template>
<script>
export default {
    computed: {
        media() {
            return {
                'is-phone': this.$screen.sm,
                'is-tablet': this.$screen.md,
                'is-desktop': this.$screen.lg,
                'can-touch': this.$screen.touch,
            };
        }
    }
}
</script>

As watchers

export default {
    watch: {
        '$screen.width'() {
            alert('Width changed');
        }
    }
}

Check out demo source code for more examples.

API

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.

Browser support

All browsers that support matchMedia API