Vue Breakpoint Mixin

Overview

Vue Breakpoint Mixin

This package contains a mixin to watch the different breakpoints for responsiveness.

Instalation

NPM:

npm install --save vue-breakpoint-mixin

Import into your Vue component and use it:

import VueBreakpointMixin from'vue-breakpoint-mixin';

export default {
  ...
  mixins: [VueBreakpointMixin],
  ...
}

Data

Name Value
xlBreakpoint 1408
lBreakpoint 1216
mBreakpoint 1024
smBreakpoint 768
sizeType xsm, sm, m, l or xl values (depending of the window size)

You can change any of these values on created or mounted method to custom the watcher.

Computed

Name Description
isMobile Compares screen width with smBreakpoint (as max-width smBreakpoint)
isTablet Compares screen width with mBreakpoint and lBreakpoint (as min-width mBreakpoint or lBreakpoint)
isDesktop Compares screen width with lBreakpoint and xlBreakpoint (as min-width lBreakpoint or xlBreakpoint)

Author

This library is created by Aar贸n Montes.

License

MIT

You might also like...
馃挰 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid
馃挰 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation)

vue-spatialnavigation Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation) Installation npm install vue-spatialnavigation --save Sp

Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Vue Ripple Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple DEMO Install You can import vue-ripple to your

A complete course on Vue.js 3. Options/Composition API, Vuex + Vue Router.
A complete course on Vue.js 3. Options/Composition API, Vuex + Vue Router.

Complete Vue.js 3 (Inc Options + Composition API, Vue Router and Vuex) Hi! Welcome to my course on Vue.js 3. Let's have a great time learning Vue.js 3

petite-vue is an alternative distribution of Vue optimized for progressive enhancement.

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework.

Vue3 plugin for work with local storage and session storage from Vue context锛孖nspired by Vue-ls

Vue3 plugin for work with local storage and session storage from Vue context锛孖nspired by Vue-ls

vue-turnjs (opens new window)vue-turnjs (opens new window)
vue-turnjs (opens new window)vue-turnjs (opens new window)

vue-turnjs 馃摝 NPM 馃摉 Docs 馃摎 Storybook Contribution Feel free to grab an issue from the list, just remember to squash your commits before merge. Contr

A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular
A beautiful chat rooms component made with Vue.js - compatible with Vue, React & Angular

vue-advanced-chat Vue 3 compatibility 馃殌 Features Vue, Angular & React compatibility Customizeable realtime chat messaging Backend agnostic Images, vi

The word highlighter library for Vue 2 and Vue 3.
The word highlighter library for Vue 2 and Vue 3.

The word highlighter library for Vue 2 & Vue 3. Demo CodeSandbox 馃摝 Installation Vue 3 yarn add vue-word-highlighter # or npm install vue-word-highlig

Owner
Aar贸n J. Montes
System Engineer/Software developer
Aar贸n J. Montes
Fela mixin for Vue designed for flexibility yet team-oriented.

fela-vue Fela mixin for Vue designed for flexibility yet team-oriented. website. (tree-shaking friendly!) Fela does the great job, but it has no idea

Michael 7 Dec 2, 2020
'resizer' event mixin for Vue.js

Vue resize mixin Vue 2.0+ Install With npm do: $ npm i -S vue-resize-mixin With bower do: $ bower install vue-resize-mixin --save Usage: var resizeMix

null 16 Aug 11, 2022
Vue mixin for visibility changed.

Vue mixin for visibility changed.

fiahfy 1 May 4, 2022
VueJS mixin plugin for creating element size queries in components

VueJS mixin plugin for creating element size queries in components.

Enzo Eghermanne 53 Jan 17, 2022
A starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some of my own practical experience on the basis of official documents.

learning-vue3 This is a starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some

chengpeiquan 373 Oct 4, 2022
vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

vue-easteregg ADD an easter egg to your vue app ;) <template> <div id="app"> {{ title }} <easteregg @easter="test" :eggs="eggs" duration="50

David Grill 13 Sep 17, 2021
Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/

vue-avatar-editor Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor Resize, rotate and crop your up

null 86 Aug 17, 2022
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Kevin Faveri 193 Sep 23, 2022
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Kevin Faveri 193 Sep 23, 2022
A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

vue-model-autoset A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive. Imagine a huge form w

Konstantin 18 Jul 30, 2020