A simple Vue plugin/mixin to augment your Vue instance with breakpoint helpers
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.eslintignore
.eslintrc.js
.gitignore
.npmignore
LICENSE
README.md
package.json
rollup.config.esm.js
rollup.config.umd.js
rollup.config.umd.min.js
yarn.lock

README.md

Vue Breakpointer

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

Install

NPM/Yarn

npm install vue-breakpointer --save

or

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>

Example

https://jsfiddle.net/5k6v07br/