Install
$ npm install --save vue-breakpoint-componentUsage
To use the component in your templates, simply import and register with your component:
Script
import { VBreakpoint } from 'vue-breakpoint-component' export default { components: { VBreakpoint } }Template
<v-breakpoint> <div slot-scope="scope"> <span v-if="scope.isSmall" style="font-size: 2rem"> 😸 </span> <span v-if="scope.isMedium" style="font-size: 4rem"> 😸 </span> <span v-if="scope.isLarge" style="font-size: 6rem"> 😸 </span> <span v-if="scope.isXlarge" style="font-size: 8rem"> 😸 </span> <span v-if="scope.noMatch" style="font-size: 10rem"> 😸 </span> </div> </v-breakpoint>Global Install
You can also choose to install the component globally. This will install three components v-breakpoint, v-show-at, v-hide-at.
import Vue from 'vue' import { Plugin as VBreakpoint } from 'vue-breakpoint-component' Vue.use(VBreakpoint)Show-At/Hide-At Usage
To use the component in your templates, simply cherry-import and register with your component.
Script
import { VShowAt } from 'vue-breakpoint-component' export default { components: { VShowAt } }Template
<v-show-at small> 😸 </v-show-at> <v-show-at medium> 😺 </v-show-at> <v-show-at large> 😽 </v-show-at> <v-show-at xlarge> 🐱 </v-show-at> <v-show-at no-match> 😿 </v-show-at> <!-- Aka Bootstrap 4 "xs" -->Multiple Root Elements (Experimental)
Notice you can also show/hide multiple elements using an experimental Fragment-like component hack, described here.
🚧 Note
To unlock this feature, you will have to configure the component with the experimental flag.
Template
<v-show-at small> <span>😸</span> </v-show-at>V-Model
You can also leverage the breakpoint state without composing inside it, using a v-model.
Template
<v-breakpoint v-model="model"></v-breakpoint> <div :style="style"></div>Script
import { VBreakpoint, Model } from 'vue-breakpoint-component' export default { components: { VBreakpoint }, data: () => ({ model: new Model() }), computed: { style() { if (this.model.isSmall) { return { width: '1rem', height: '1rem' } } else if (this.model.isMedium) { return { width: '2rem', height: '2rem' } } else if (this.model.isLarge) { return { width: '3rem', height: '3rem' } } else if (this.model.isXlarge) { return { width: '4rem', height: '4rem' } } } } }Props
debounceTime: { type: Number, description: 'Time to wait before invoking resize handler.' }Events
The component emits two core events, input and change. The input event is required for v-model usage, but other than that, it's fairly similar to change event. Each of these events benefit different composition styles.
Payloads
Input and Change Events [Object]
Each of these events has the same payload. Besides breakpoint state, they also supply some auxiliary state, like viewport and current inner window dimensions (which are also aliased for convenience). Example:
{ breakpoint: 'small', isSmall: true, isMedium: false, isLarge: false, noMatch: false, iw: 623, ih: 1077, innerWidth: 623, innerHeight: 1077, innerWidthPx: '623px', innerHeightPx: '1077px', vw: 1920, vh: 1200, viewportWidth: 1920, viewportHeight: 1200, viewportWidthPx: '1920px', viewportHeightPx: '1200px' }Breakpoint Event [String]
'small' | 'medium' | 'large' | 'xlarge' // Etc'Breakpoint-Namespace Event
Besides those events, the component also emits a breakpoint-namespace event per breakpoint defined. Thus, you can do something like:
<v-breakpoint @small="handleSmall"></v-breakpoint> <v-breakpoint @medium="handleMedium"></v-breakpoint> <v-breakpoint @large="handleLarge"></v-breakpoint> <v-breakpoint @xlarge="handleXlarge"></v-breakpoint> <v-breakpoint @no-match="handleNoMatch"></v-breakpoint> <!-- Aka Bootstrap 4 "xs" -->Configuration
The default breakpoints are based on Bootstrap 4 (Stable). To customize the component you will have to use the extend helper. Start off by creating a new component asset, e.g.: VBreakpoint.js. Then, use the following snippet and adjust configuration to your needs.
// <project-root>/src/components/VBreakpoint.js import { extend } from 'vue-breakpoint-component' // Default configuration: const config = { breakpoints: { small: '(min-width: 576px)', medium: '(min-width: 768px)', large: '(min-width: 992px)', xlarge: '(min-width: 1200px)' }, debounceTime: 100, experimental: false } const { VShowAt, VHideAt, VBreakpoint } = extend(config) export default VBreakpoint export { VShowAt, VHideAt, VBreakpoint }Usage
Import locally and use as you would normally.
// Local imports import { Model } from 'vue-breakpoint-component' import { VShowAt, VHideAt, VBreakpoint } from './VBreakpoint' export default { components: { VShowAt, VHideAt, VBreakpoint }, data: () => ({ model: new Model() }) }Default Breakpoints (Bootstrap 4)
/** * Extra small devices (portrait phones, less than 576px) * No media query for "xs" since this is the default in Bootstrap. */ /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { /* ... */ } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { /* ... */ } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { /* ... */ } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { /* ... */ }Custom Breakpoints
You can define an infinite amount of breakpoints. For media-query syntax see MDN.
Experimental Features
Wrapping Multiple Root Elements (Fragment Hack)
As you may know, Vue does not support a stateful Fragment component, which allows you to render a component with multiple root elements, overruling the "single root element" principle dictated at the outset of component-based architecture. It was introduced to React during a full re-write. You can learn about it from React docs. Vue is likely to follow suit in a similar manner (probably with Vue 3). This feature request is currently discussed here. Meanwhile, I decided to hack a Fragment component, which is also incorporated into this component, thanks to Github user y-nk. I elaborated his solution so it can also show/hide content (using directives like v-show or v-if won't work here).
🚧 Note
Since this is a hack, it is likely not to be extended into a fully supported feature. Feel free to contribute back though.
Browser Support
This component relies on matchMedia API (IE 10+). For older browsers and IE, you will need a polyfill. There's @paulirish and @weblinc. The latter seems more maintained.
Related Links
Support
Please open an issue for support.
