vue-breakpoints
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: Infinitybut 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.
