@wardy484/vue md breakpoint

Material Design breakpoints for Vue

Version: 1.0.0 Updated: 11/02/2018

By: wardy484 License: MIT

Downloads Last 30 Days: 146


This is a fork of vue-md-breakpoint to allow the overriding of breakpoint widths. Original Package: https://github.com/cb109/vue-md-breakpoint

Access the current breakpoint from the material design spec inside a Vue app. Resizing the browser will update the breakpoint accordingly.


npm install vue-md-breakpoint
# or:
yarn add vue-md-breakpoint


You can use it as a mixin for your app.

import Vue from 'vue';
import breakpoint from '@wardy484/vue-md-breakpoint';

// in your app/component:
// breakpoint override is optional, if not provided then the defaults from the original package will be applied
Vue.use(breapoint, {
    breakpoints: {
        xs: 500,
        sm: 700,
        lg: 1000,
        xl: 1300

// and in your templates:

<div v-if="$breakpoint.smAndUp"></div>


  • $breakpoint.name
  • $breakpoint.xsOnly
  • $breakpoint.smOnly
  • $breakpoint.smAndDown
  • $breakpoint.smAndUp
  • $breakpoint.mdOnly
  • $breakpoint.mdAndDown
  • $breakpoint.mdAndUp
  • $breakpoint.lgOnly
  • $breakpoint.lgAndDown
  • $breakpoint.lgAndUp
  • $breakpoint.xlOnly
  • $breakpoint.width
  • $breakpoint.height


npm run test
Categories: Vue js