https://github.com/scaccogatto/vue-viewports
define your custom viewports and use them in your components
https://github.com/scaccogatto/vue-viewports
Last synced: 7 months ago
JSON representation
define your custom viewports and use them in your components
- Host: GitHub
- URL: https://github.com/scaccogatto/vue-viewports
- Owner: scaccogatto
- License: mit
- Created: 2016-11-22T11:17:34.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T12:59:56.000Z (over 7 years ago)
- Last Synced: 2025-03-27T20:05:44.774Z (8 months ago)
- Language: JavaScript
- Size: 69.3 KB
- Stars: 76
- Watchers: 2
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-viewports - Define your custom viewports and use them in your components. (Components & Libraries / UI Utilities)
- awesome-vue-refactor - vue-viewports
- awesome-vue-zh - Vue,视 - 定义自定义视口并在组件中使用它们. (UI实用程序 / 响应式设计)
- awesome-vue - vue-viewports - Define your custom viewports and use them in your components. (UI Utilities / Responsive Design)
README
# vue-viewports
> define your custom viewports and use them in your components
## Features
- Uses [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
- Exposes a fully updated viewport name
## Installation
### npm
```shell
npm install vue-viewports --save-dev
```
### Vue's main.js
```js
import VueViewports from 'vue-viewports'
const options = [
{
rule: '320px',
label: 'mobile'
},
{
rule: '768px',
label: 'tablet'
},
{
rule: '1024px',
label: 'desktop'
},
{
rule: '1920px',
label: 'hd-desktop'
},
{
rule: '2560px',
label: 'qhd-desktop'
},
{
rule: '3840px',
label: 'uhd-desktop'
}
]
Vue.use(VueViewports, options)
```
### Arguments
- options [optional]: object defining a set of `{ rule: value, label: value }` where 'rule' is the number value where the viewport starts (included) and the 'label' is the viewport's name, **defaults** on previous example
## Example
```js
{
if (this.$currentViewport.label === 'tablet') {
// from 768px (included) to 1024px (excluded)
} else {
// anything else
}
}
```
## Variables
- `$currentViewport`: the current viewport object, defined by `rule`, `label`; `undefined` if no match.
> Feel free to contribute and ask questions!