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:
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