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

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

reegodev Last Updated: 2 years ago

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

Related Posts

Add Comment