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

? Install

yarn add vue-breakpoints

? Usage

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

  import {showAt, hideAt} from 'vue-breakpoints'
  export default {
    components: { hideAt, showAt }


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">