Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/reinerBa/Vue-Responsive

A plugin for responsive handling with vue.js
https://github.com/reinerBa/Vue-Responsive

responsive responsive-design vue vue-directive vue-element vuejs vuejs2

Last synced: 26 days ago
JSON representation

A plugin for responsive handling with vue.js

Lists

README 

        


  




# Vue-Responsive



JavaScript Standard Style



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

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

[![Npm package yearly downloads](https://badgen.net/npm/dy/vue-responsive)](https://npmjs.com/package/vue-responsive)

[![license](https://img.shields.io/github/license/reinerBa/Vue-Responsive.svg)](https://github.com/reinerBa/vue-responsive/blob/master/LICENSE)

[![Github file size](https://img.shields.io/github/size/reinerBa/Vue-Responsive/dist/Vue-Responsive.min.js.svg)](https://raw.githubusercontent.com/reinerBa/Vue-Responsive/master/dist/Vue-Responsive.min.js)

[![GitHub stars](https://img.shields.io/github/stars/reinerBa/vue-responsive.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/reinerBa/vue-responsive/stargazers/)



[![NPM](https://nodei.co/npm/vue-responsive.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-responsive/)



**Breaking Changes for verison 1.x:** 



- **Tag is now `v-responsive` the old `v-responsiveness` is no longer supported.**

- **The file `Vue_Responsive.common.js` does no longer exist** 



Is a directive to use responsive breakpoints on html elements. Because sometimes it's nice to have a chance to let the view do resolution specific things.



- **No further Dependencies** 

- **πŸ”§ Chrome, Firefox, IE11+**



πŸ“Ί Check the [Demo](https://reinerba.github.io/Vue-Responsive/dist/)-link (IE11-[Demo](http://reinerba.github.io/Vue-Responsive/Demo.html) without webpack)



πŸ“– [Docs](https://reinerba.github.io/Vue-Responsive/Documentation/)



## πŸ”§  Install

`npm install vue-responsive`



```javascript



import responsive from 'vue-responsive'

Vue.use(responsive)

```



or in your Browser as **CDN**: 


``



## πŸ‘ˆ Shortest usecase



Just put the breakpoint identifiers behind the directive with dots:



```html



   
Only visible on desktop !



   
Visible on tablet ☺



   
Only visible on smartphone!


```



## πŸ‘ˆ Small usage example



```javascript



  


    
Big Title


    


      Only visible in small and extra-small windows

    



    
Big Jumbotron


  



  import vueResponsive from 'vue-responsive'

  Vue.directive('responsive', vueResponsive)

  ...

  data:{

	middleSize: ['hidden-all','lg','xl']

  } 



```



# Features



This directive adds responsive Feautures to single HTML-Elements without CSS or @Media.



The default Responsive breaks follow Bootstrap 4 [Responsive Utils](https://v4-alpha.getbootstrap.com/layout/responsive-utilities/).



The Bootstrap 3 breakpoints are includes as well.



## Do you miss a feature?

Take charge and file an issue or [add your idea](http://feathub.com/reinerBa/Vue-Responsive/features/new) or [vote for your favorite feature](http://feathub.com/reinerBa/Vue-Responsive) to be implemented:



[![Feature Requests](http://feathub.com/reinerBa/Vue-Responsive?format=svg)](http://feathub.com/reinerBa/Vue-Responsive)



# Usage



In the browser just include the script and use the directive on a Html-Element inside a Vue Element



    



**Advanced:** If you do not want the directive to be globally available just add the attribute *notGlobal* with a not empty value in the script tag and define it the components with:



```html



    	

	...

	directives:{

		// the global variable is 'index.vueResponsive'

		responsive: index.vueResponsive

	}

```



## For Bootstrap 4 breakpoints

At default every resolution is visible, the hidden-all tag changes this to everything hidden (display:none). These tags are valid **hidden-all**, **xs**, **sm**, **md**, **lg**, **xl**, **hidden-xs**,...,**hidden-xl**.



```javascript



  
Big Title


  
Only visible in Middle and large Size View


  
Only hidden at lg



  
Jumbotron


  ...	//in the vue object

  data:{

    middleSize:['hidden-all','lg','xl']

  } 



```



## For Bootstrap 3 breakpoints

Just add **:bs3** after the directive to use bootstrap 3 breakpoints:



```javascript



  


    As you can see on the big picture below.


  



```



In this defintion the **xl** breakpoint doesn't exist.



## For self defined breakpoints 

First you have to declar your own breakpoints in the component/root wich wraps the html-elements with the directive. Every definition must start with **responsiveMarks$$** and a following name. So you can easily create breakpoints to differentiate between desktop and smartphones for instance, as you can see in the demo.html:

	

```javascript



  


    Visible on smartphone


    

  



  ... //in the vue object

  data:{

    responsiveMarks$$twoMarks: {  //set a custom breakpoint with the name "twoMarks"

      smartphone: { 

        show: true, 

        min: -1, 

        max: 767 

      }, 

      desktop: { 

        show: true, 

        min: 768, 

        max: Infinity 

      } 

    }

  } 



```



You can declar as much own definitions as you wish. Every defintion should have **min:-1** for its smalles breakpoint and **max:Infinity** for its biggest.



### Planned 

  - Mixin to trigger methods on breakpoint change

  - Add and remove classes instead of changing only the style



# License

MIT [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE.md)