KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

Vue-Responsive

★ 97 Open GitHub ↗

A plugin for responsive handling with vue.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue-Responsive

[![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**: <br/>
`<script src="https://unpkg.com/vue-responsive@1.3.1/dist/Vue-Responsive.min.js"></script>`

## 👈 Shortest usecase

Just put the breakpoint identifiers behind the directive with dots:

```html

<div v-responsive.lg.xl >Only visible on desktop !</div>

<div v-responsive.md    >Visible on tablet ☺</div>

<div v-responsive.sm.xs >Only visible on smartphone!</div>
```

## 👈 Small usage example

```javascript

<template>
  <div>
    <h1 v-responsive="'hidden-xs'">Big Title</h1>
    <div v-responsive="['hidden-all','xs','sm']">
      Only visible in small and extra-small windows
    </div>

<h1 v-responsive="middleSize">Big Jumbotron</h1>
  </div>
</template>

# 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

## 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

<h1 v-responsive="'hidden-xs'">Big Title</h1>
  <div v-responsive="['hidden-all','md','lg']">Only visible in Middle and large Size View</div>
  <div v-responsive="['hidden-lg']">Only hidden at lg</div>

<h1 v-responsive="middleSize">Jumbotron</h1>
  ...	//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

<p v-responsive:bs3="['hidden-xs']">
    As you can see on the big picture below.<br /><img ... />
  </p>

```

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

<p v-responsive:twoMarks="'hidden-desktop'">
    Visible on smartphone<br />
    <img src="http://lorempixel.com/360/240/animals" />
  </p>

... //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)](https://raw.githubusercontent.com/reinerBa/Vue-Responsive/primary/LICENSE.md)

Vue-Responsive

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README