A renderless component for composing CSS breakpoints


$ npm install --save vue-breakpoint-component


To use the component in your templates, simply import and register with your component:


import { VBreakpoint } from 'vue-breakpoint-component'

export default {
  components: {


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

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'


Show-At/Hide-At Usage

To use the component in your templates, simply cherry-import and register with your component.


import { VShowAt } from 'vue-breakpoint-component'

export default {
  components: { VShowAt }


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


To unlock this feature, you will have to configure the component with the experimental flag.


<v-show-at small>


You can also leverage the breakpoint state without composing inside it, using a v-model.


<v-breakpoint v-model="model"></v-breakpoint>
<div :style="style"></div>


import { VBreakpoint, Model } from 'vue-breakpoint-component'

export default {
  components: {
  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'


debounceTime: {
  type: Number,
  description: 'Time to wait before invoking resize handler.'


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.


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


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 }


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

Layout Thrashing

This component avoids layout-thrashing pitfalls by utilizing window.requestAnimationFrame.

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).


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


Please open an issue for support.

Download Details:

Author: adi518

Live Demo: https://git.io/Jv61S

GitHub: https://github.com/adi518/vue-breakpoint-component

#vuejs #vue #javascript #vue-js

A renderless component for composing CSS breakpoints
4.10 GEEK