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.

Features:

• 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)
Vue.use(VueScreen); 
// 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.

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

Preview:

Changelog:

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: https://reegodev.github.io/vue-screen/

Download Link: https://github.com/reegodev/vue-screen/archive/develop.zip

Official Website: https://github.com/reegodev/vue-screen

Install & Download:

# Yarn
$ yarn add vue-screen

# NPM
$ npm install vue-screen --save