# Vue-Responsive
[](https://vuejs.org/)
[](https://www.npmjs.com/package/vue-responsive)
[](https://github.com/reinerBa/Vue-Responsive/stargazers)
[](https://github.com/reinerBa/vue-responsive/blob/master/LICENSE)
[](https://raw.githubusercontent.com/reinerBa/Vue-Responsive/master/dist/Vue-Responsive.min.js)
[](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)
```
## 👈 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
```
# 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:
[](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 [](/LICENSE.md)