Vue md breakpoint

Material Design breakpoints for Vue

Version: 1.0.0 Updated: 04/05/2018

By: cb109 License: MIT

Downloads Last 30 Days: 27

vue-md-breakpoint

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

Installation

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

Usage

You can use it as a mixin for your app.

import Vue from 'vue';
import breakpoint from 'vue-md-breakpoint';

// in your app/component:

mixins: [breakpoint],

// and in your templates:

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

API

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

Tests

npm run test
Categories: Vue js