vue-breakpoints

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-breakpoints
190151.1.05 years ago5 years agoMinified + gzip package size for vue-breakpoints in KB

Readme

vue-breakpoints
Build Status codecov npm vue2 license
Vue.js utility component to show and hide components based on breakpoints
šŸ“ŗ Demo

šŸ”§ 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

:scroll: Changelog

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

:exclamation: Issues

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

:muscle: Contribution

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

:copyright: License

MIT