Detect Window Size And Media Query In Vue – vue-screen

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


  • Reactive and debounced window innerWidth and innerHeight
  • Reactive media query states and device orientation
  • 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 included)

How to use it:

1. Install and import the module.

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

2. Register the component and define the framework you want to use.

// Tailwind (default)
// 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');

3. Or using custom breakpoints.

Vue.use(VueScreen, {
  sm: 480, 
  md: '45em',
  lg: '1280px'

4. Insert the component in your app template.

    <p>Page width is {{ $screen.width }} px</p>
    <p>Page height is {{ $screen.height }} px</p>
    <p>Current breakpoint is {{ $screen.breakpoint }} px</p>


Detect Window Size And Media Query In Vue - vue-screen


v1.5.3 (11/15/2020)

  • fix: add backwards compatibility for matchMedia queries

v1.5.2 (11/09/2020)

  • Fixed: Do not include breakpointsOrder property when looping breakpoint keys

v1.5.0 (11/07/2020)

  • Add Tailwind 2xl breakpoint
  • Add config property on $screen object

v1.4.4 (09/01/2020)

  • Fix Tailwind lg and xl breakpoint values

Download Details:

Author: reegodev

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-screen

$ npm install vue-screen --save

Add Comment