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

Description:

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:

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

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

You Might Be Interested In:

Add Comment