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-link (IE11-Demo without webpack)

📖 Docs

🔧 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




`

Features

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

The default Responsive breaks follow Bootstrap 4 Responsive Utils.

The Bootstrap 3 breakpoints are includes as well.

Do you miss a feature?

Take charge and file an issue or add your idea or vote for your favorite feature to be implemented:


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.

$3

- Mixin to trigger methods on breakpoint change
- Add and remove classes instead of changing only the style

License

MIT