https://github.com/jjcosgrove/vue-breakpointer
A simple Vue plugin/mixin to augment your Vue instance with breakpoint helpers
https://github.com/jjcosgrove/vue-breakpointer
breakpoints mixin plugin responsive rollup vue
Last synced: about 2 months ago
JSON representation
A simple Vue plugin/mixin to augment your Vue instance with breakpoint helpers
- Host: GitHub
- URL: https://github.com/jjcosgrove/vue-breakpointer
- Owner: jjcosgrove
- License: mit
- Created: 2018-09-16T13:25:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-10T20:33:06.000Z (about 5 years ago)
- Last Synced: 2025-06-12T21:17:50.947Z (about 1 year ago)
- Topics: breakpoints, mixin, plugin, responsive, rollup, vue
- Language: JavaScript
- Homepage:
- Size: 203 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Breakpointer
A simple Vue plugin/mixin to augment your Vue instance with breakpoint helpers
## Install
### NPM/Yarn
```bash
npm install vue-breakpointer --save
```
or
```bash
yarn add vue-breakpointer --save
```
### Browser
```html
```
## Plugin
```js
import VueBreakpointer from 'vue-breakpointer'
...
Vue.use(VueBreakpointer, {
// defaults
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200
}
})
...
```
## Mixin
```js
import { VueBreakpointerMixin } from 'vue-breakpointer'
...
export default {
...
mixins: [ VueBreakpointerMixin ],
data () {
return {
// defaults
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200
}
}
}
...
}
...
```
## Data & Computed Properties
| Property | Type | Description |
| ------------- | ------------- | ------------- |
| windowDimensions | Object | On object containing both the current window width & height (in pixels) |
| xs | Boolean | < sm |
| sm | Boolean | >= sm && < md |
| md | Boolean | >= md && < lg |
| lg | Boolean | >= lg && < xl |
| xl | Boolean | >= xl |
## Example usage
```html
{{windowDimensions}}
{{breakpoint}}
I am visible only on xs screens
I am visible only on sm screens
I am visible only on md screens
I am visible only on lg screens
I am visible only on xl screens
```
## Example
https://jsfiddle.net/5k6v07br/