Skip to content

🍬 πŸ™ˆ Vue.js utility component to show and hide components based on breakpoints

License

Notifications You must be signed in to change notification settings

apertureless/vue-breakpoints

Repository files navigation

vue-breakpoints

Build Status codecov npm vue2 license

ko-fi

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

πŸ“Ί Demo

πŸ”§ Install

npm i vue-breakpoints

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

πŸ“œ Changelog

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

πŸ’ͺ Contribution

Please make sure to read the Contributing Guide and Code of Conduct before making a pull request.

©️ License

MIT

Support

Buy Me A Coffee