https://github.com/apertureless/vue-breakpoints

🍬 🙈 Vue.js utility component to show and hide components based on breakpoints
https://github.com/apertureless/vue-breakpoints

breakpoints component responsive utility vue vuejs

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/apertureless/vue-breakpoints
• Owner: apertureless
• License: mit
• Created: 2017-08-28T15:30:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T04:11:20.000Z (about 2 years ago)
• Last Synced: 2025-01-02T01:39:34.579Z (10 days ago)
• Topics: breakpoints, component, responsive, utility, vue, vuejs
• Language: JavaScript
• Homepage: https://apertureless.github.io/vue-breakpoints/
• Size: 1.19 MB
• Stars: 194
• Watchers: 4
• Forks: 13
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

README

        


  



# vue-breakpoints

[![Build Status](https://travis-ci.org/apertureless/vue-breakpoints.svg?branch=develop)](https://travis-ci.org/apertureless/vue-breakpoints)

[![codecov](https://codecov.io/gh/apertureless/vue-breakpoints/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-breakpoints)

[![npm](https://img.shields.io/npm/v/vue-breakpoints.svg)](https://www.npmjs.com/package/vue-breakpoints)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-breakpoints/blob/master/LICENSE)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)

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

📺 [Demo](https://apertureless.github.io/vue-breakpoints/)

## 🔧  Install

`npm i vue-breakpoints`

`yarn add vue-breakpoints`

## 👈 Usage

```javascript

  

    

      

    

    

      

    

  

  import {showAt, hideAt} from 'vue-breakpoints'

  export default {

    components: { hideAt, showAt }

  }

```

## Breakpoints

You can pass following values as a breakpoint:

- small

- mediumAndBelow

- medium

- mediumAndAbove

- largeAndBelow

- large

### Default Breakpoints

Default breakpoints are

```js

small: 744,

medium: 1128,

large: Infinity

```

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

```js

```

## 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](https://github.com/apertureless/vue-breakpoints/blob/master/CHANGELOG.md).

## :exclamation: Issues

Please make sure to read the [Issue Reporting Checklist](https://github.com/apertureless/vue-breakpoints/blob/master/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.

## :muscle: Contribution

Please make sure to read the [Contributing Guide](https://github.com/apertureless/vue-breakpoints/blob/master/CONTRIBUTING.md) and [Code of Conduct](code-of-conduct.md) before making a pull request.

## :copyright: License

[MIT](http://opensource.org/licenses/MIT)

## Support