A plugin for responsive design without media querys for Vue.js 2.x
npm install vue-responsive
v-responsive the old v-responsiveness is no longer supported.
Vue_Responsive.common.js does no longer exist
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.
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
}
}
}
``