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: 4 months ago
JSON representation
A plugin for responsive handling with vue.js
- Host: GitHub
- URL: https://github.com/reinerba/vue-responsive
- Owner: reinerBa
- License: mit
- Created: 2016-12-19T00:16:46.000Z (almost 9 years ago)
- Default Branch: primary
- Last Pushed: 2024-09-17T19:53:56.000Z (about 1 year ago)
- Last Synced: 2025-04-07T19:15:58.611Z (7 months ago)
- Topics: responsive, responsive-design, vue, vue-directive, vue-element, vuejs, vuejs2
- Language: Vue
- Homepage: https://reinerba.github.io/Vue-Responsive/dist/
- Size: 975 KB
- Stars: 100
- Watchers: 3
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
# Vue-Responsive
[](https://vuejs.org/)
[](https://www.npmjs.com/package/vue-responsive)
[](https://npmjs.com/package/vue-responsive)
[](https://github.com/reinerBa/vue-responsive/blob/master/LICENSE)
[](https://raw.githubusercontent.com/reinerBa/Vue-Responsive/master/dist/Vue-Responsive.min.js)
[](https://GitHub.com/reinerBa/vue-responsive/stargazers/)
[](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:
[](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)