vue-breakpointer's Introduction

Vue Breakpointer

A simple Vue plugin/mixin to augment your Vue instance with breakpoint helpers

Install

NPM/Yarn

npm install vue-breakpointer --save

yarn add vue-breakpointer --save

Browser

<script src="https://unpkg.com/vue-breakpointer"></script>

Plugin

import VueBreakpointer from 'vue-breakpointer'
...
Vue.use(VueBreakpointer, {
  // defaults
  breakpoints: {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  }
})
...

Mixin

import { VueBreakpointerMixin } from 'vue-breakpointer'
...
export default {
  ...
  mixins: [ VueBreakpointerMixin ],
  data () {
    return {
      // defaults
      breakpoints: {
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200
      }
    }
  }
  ...
}
...

Data & Computed Properties

Property	Type	Description
windowDimensions	Object	On object containing both the current window width & height (in pixels)
xs	Boolean	< sm
sm	Boolean	>= sm && < md
md	Boolean	>= md && < lg
lg	Boolean	>= lg && < xl
xl	Boolean	>= xl

Example usage

<template>
  <div>
    <!-- an object showing both width and height of window -->
    <pre>{{windowDimensions}}</pre>

    <!-- the current breakpoint -->
    <pre>{{breakpoint}}</pre>

    <!-- use to determine visibility of elements and components at certain breakpoints -->
    <div v-if="xs">I am visible only on xs screens</div>
    <div v-if="sm">I am visible only on sm screens</div>
    <div v-if="md">I am visible only on md screens</div>
    <div v-if="lg">I am visible only on lg screens</div>
    <div v-if="xl">I am visible only on xl screens</div>
  </div>
</template>