https://github.com/yutahaga/vue-media-breakpoints

A plugin of Vue that store current viewport size name.
https://github.com/yutahaga/vue-media-breakpoints

media-queries vue vue-plugin

Last synced: about 2 months ago
JSON representation

A plugin of Vue that store current viewport size name.

• Host: GitHub
• URL: https://github.com/yutahaga/vue-media-breakpoints
• Owner: yutahaga
• License: mit
• Created: 2018-09-12T16:50:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-10-25T01:36:35.000Z (3 months ago)
• Last Synced: 2024-11-28T01:37:16.526Z (2 months ago)
• Topics: media-queries, vue, vue-plugin
• Language: TypeScript
• Size: 316 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-media-breakpoints

## Features

- Not using Vue's private API.

- Using Passive Event Listeners.

- You can use a custom debouncing function.

## Getting Started

### Install

```sh

npm i @yutahaga/vue-media-breakpoints -S

```

or

```sh

yarn add @yutahaga/vue-media-breakpoints

```

### Usage

When supporting SSR, avoid using `v-if` and use `v-show`.

Note that `v-show` does not support the `` element, nor does it work with `v-else`.

```js

import { install as MediaBreakPointsPlugin, BreakPointManager } from '@yutahaga/vue-media-breakpoints';

import debounce from 'lodash.debounce';

import Vue from 'vue';

const GRID_BREAKPOINTS = {

  xs: 0,

  sm: 576,

  md: 768,

  lg: 992,

  xl: 1200,

};

Vue.use(MediaBreakPointsPlugin, {

  breakPoints: GRID_BREAKPOINTS,

  debounceFunction: debounce,

  debounceInterval: 30,

});

const vm = new Vue({

  el: '#app',

  template: `

    


      
{{ $bp.name }}: {{ $bp.width }}px

      


        This tag is displayed only when the viewport is md ~ xl.

      

      


        This tag is displayed only when the viewport is xs ~ sm.

      

      


        This tag is displayed only when the viewport is lg.

      

      


        This tag is displayed only when the viewport is xs and xl.

      

      


        This tag is displayed only when the viewport is between sm and lg. (sm <= ViewPort < lg)

      

      


        This tag is displayed only when the viewport is sm or above.

      

      


        This tag is displayed only when the viewport is sm or below.

      

    

  `

});


declare module 'vue/types/vue' {

  interface Vue {

    $bp: BreakPointManager;

  }

}

```