Vue-breakpoints NPM

vue-breakpoints

Vue.js utility component to show and hide components based on breakpoints

🔧 Install

yarn add vue-breakpoints

👈 Usage

<template>
  <nav>
    <hide-at breakpoint="medium">
      <mobile-nav />
    </hide-at>
    <show-at breakpoint="mediumAndAbove">
      <desktop-nav>
    </show-at>
  </nav>
</template>

<script>
  import {showAt, hideAt} from 'vue-breakpoints'
  export default {
    components: { hideAt, showAt }
  }
</script>

Breakpoints

You can pass following values as a breakpoint:

small
mediumAndBelow
medium
mediumAndAbove
largeAndBelow
large

Default Breakpoints

Default breakpoints are

small: 744,
medium: 1128,
large: Infinity

but they can be overwritten if you pass an object to the breakpoints prop.

<show-at :breakpoints="{small: 620, medium: 1280, large: 1600}" breakpoint="medium">

Props

prop	default	type	description
breakpoints	undefined	Object	Important that if you pass the object you only use `small`, `medium` and `large` as the childs.
breakpoint	''	String	Breakpoint where it should show or hide `small`, `mediumAndBelow`, `medium`, `mediumAndAbove`, `largeAndBelow`, `large`