{"id":14973767,"url":"https://github.com/reinerba/vue-responsive","last_synced_at":"2025-07-05T04:34:14.793Z","repository":{"id":14659171,"uuid":"76814575","full_name":"reinerBa/Vue-Responsive","owner":"reinerBa","description":"A plugin for responsive handling with vue.js","archived":false,"fork":false,"pushed_at":"2024-09-17T19:53:56.000Z","size":998,"stargazers_count":100,"open_issues_count":3,"forks_count":6,"subscribers_count":3,"default_branch":"primary","last_synced_at":"2025-04-07T19:15:58.611Z","etag":null,"topics":["responsive","responsive-design","vue","vue-directive","vue-element","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://reinerba.github.io/Vue-Responsive/dist/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reinerBa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-19T00:16:46.000Z","updated_at":"2025-03-22T17:25:06.000Z","dependencies_parsed_at":"2023-11-07T16:26:24.124Z","dependency_job_id":"a07768ab-8e7c-4ec5-82c8-49eb471c1634","html_url":"https://github.com/reinerBa/Vue-Responsive","commit_stats":{"total_commits":98,"total_committers":8,"mean_commits":12.25,"dds":0.6734693877551021,"last_synced_commit":"a92328104793d79ca3bccf3e621c67a6b9507190"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reinerBa%2FVue-Responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reinerBa%2FVue-Responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reinerBa%2FVue-Responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reinerBa%2FVue-Responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reinerBa","download_url":"https://codeload.github.com/reinerBa/Vue-Responsive/tar.gz/refs/heads/primary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["responsive","responsive-design","vue","vue-directive","vue-element","vuejs","vuejs2"],"created_at":"2024-09-24T13:49:23.038Z","updated_at":"2025-04-07T19:16:09.143Z","avatar_url":"https://github.com/reinerBa.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"Documentation/logo.png\" /\u003e\n\u003c/p\u003e\n\n# Vue-Responsive\n\n\u003ca href=\"https://standardjs.com\" style=\"float: right; padding: 0 0 20px 20px;\"\u003e\u003cimg src=\"https://cdn.rawgit.com/feross/standard/master/sticker.svg\" alt=\"JavaScript Standard Style\" width=\"100\" align=\"right\"\u003e\u003c/a\u003e\n\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![npm](https://img.shields.io/npm/v/vue-responsive.svg)](https://www.npmjs.com/package/vue-responsive)\n[![Npm package yearly downloads](https://badgen.net/npm/dy/vue-responsive)](https://npmjs.com/package/vue-responsive)\n[![license](https://img.shields.io/github/license/reinerBa/Vue-Responsive.svg)](https://github.com/reinerBa/vue-responsive/blob/master/LICENSE)\n[![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)\n[![GitHub stars](https://img.shields.io/github/stars/reinerBa/vue-responsive.svg?style=social\u0026label=Star\u0026maxAge=2592000)](https://GitHub.com/reinerBa/vue-responsive/stargazers/)\n\n\n[![NPM](https://nodei.co/npm/vue-responsive.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/vue-responsive/)\n\n**Breaking Changes for verison 1.x:** \n\n- **Tag is now `v-responsive` the old `v-responsiveness` is no longer supported.**\n- **The file `Vue_Responsive.common.js` does no longer exist** \n\nIs 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.\n\n- **No further Dependencies** \n- **🔧 Chrome, Firefox, IE11+**\n\n\n📺 Check the [Demo](https://reinerba.github.io/Vue-Responsive/dist/)-link (IE11-[Demo](http://reinerba.github.io/Vue-Responsive/Demo.html) without webpack)\n\n📖 [Docs](https://reinerba.github.io/Vue-Responsive/Documentation/)\n\n## 🔧  Install\n`npm install vue-responsive`\n\n```javascript\n\nimport responsive from 'vue-responsive'\nVue.use(responsive)\n```\n\nor in your Browser as **CDN**: \u003cbr/\u003e\n`\u003cscript src=\"https://unpkg.com/vue-responsive@1.3.1/dist/Vue-Responsive.min.js\"\u003e\u003c/script\u003e`\n\n## 👈 Shortest usecase\n\nJust put the breakpoint identifiers behind the directive with dots:\n\n```html\n\n   \u003cdiv v-responsive.lg.xl \u003eOnly visible on desktop !\u003c/div\u003e\n\n   \u003cdiv v-responsive.md    \u003eVisible on tablet ☺\u003c/div\u003e\n\n   \u003cdiv v-responsive.sm.xs \u003eOnly visible on smartphone!\u003c/div\u003e\n```\n\n## 👈 Small usage example\n\n```javascript\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1 v-responsive=\"'hidden-xs'\"\u003eBig Title\u003c/h1\u003e\n    \u003cdiv v-responsive=\"['hidden-all','xs','sm']\"\u003e\n      Only visible in small and extra-small windows\n    \u003c/div\u003e\n\n    \u003ch1 v-responsive=\"middleSize\"\u003eBig Jumbotron\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import vueResponsive from 'vue-responsive'\n  Vue.directive('responsive', vueResponsive)\n  ...\n  data:{\n\tmiddleSize: ['hidden-all','lg','xl']\n  } \n\u003c/script\u003e\n```\n\n# Features\n\nThis directive adds responsive Feautures to single HTML-Elements without CSS or @Media.\n\nThe default Responsive breaks follow Bootstrap 4 [Responsive Utils](https://v4-alpha.getbootstrap.com/layout/responsive-utilities/).\n\nThe Bootstrap 3 breakpoints are includes as well.\n\n## Do you miss a feature?\nTake 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:\n\n[![Feature Requests](http://feathub.com/reinerBa/Vue-Responsive?format=svg)](http://feathub.com/reinerBa/Vue-Responsive)\n\n# Usage\n\nIn the browser just include the script and use the directive on a Html-Element inside a Vue Element\n\n    \u003cscript src=\"Vue-Responsive.min.js\"\u003e\u003c/script\u003e\n\n**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:\n\n\n```html\n\n    \u003cscript src=\"Vue-Responsive.min.js\" notGlobal=\"true\" \u003e\u003c/script\u003e\t\n\t...\n\tdirectives:{\n\t\t// the global variable is 'index.vueResponsive'\n\t\tresponsive: index.vueResponsive\n\t}\n```\n\n## For Bootstrap 4 breakpoints\nAt 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**.\n\n```javascript\n\n  \u003ch1 v-responsive=\"'hidden-xs'\"\u003eBig Title\u003c/h1\u003e\n  \u003cdiv v-responsive=\"['hidden-all','md','lg']\"\u003eOnly visible in Middle and large Size View\u003c/div\u003e\n  \u003cdiv v-responsive=\"['hidden-lg']\"\u003eOnly hidden at lg\u003c/div\u003e\n\n  \u003ch1 v-responsive=\"middleSize\"\u003eJumbotron\u003c/h1\u003e\n  ...\t//in the vue object\n  data:{\n    middleSize:['hidden-all','lg','xl']\n  } \n\n```\n\n## For Bootstrap 3 breakpoints\nJust add **:bs3** after the directive to use bootstrap 3 breakpoints:\n\n```javascript\n\n  \u003cp v-responsive:bs3=\"['hidden-xs']\"\u003e\n    As you can see on the big picture below.\u003cbr /\u003e\u003cimg ... /\u003e\n  \u003c/p\u003e\n\n```\n\nIn this defintion the **xl** breakpoint doesn't exist.\n\n## For self defined breakpoints \nFirst 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:\n\t\n```javascript\n\n  \u003cp v-responsive:twoMarks=\"'hidden-desktop'\"\u003e\n    Visible on smartphone\u003cbr /\u003e\n    \u003cimg src=\"http://lorempixel.com/360/240/animals\" /\u003e\n  \u003c/p\u003e\n\n  ... //in the vue object\n  data:{\n    responsiveMarks$$twoMarks: {  //set a custom breakpoint with the name \"twoMarks\"\n      smartphone: { \n        show: true, \n        min: -1, \n        max: 767 \n      }, \n      desktop: { \n        show: true, \n        min: 768, \n        max: Infinity \n      } \n    }\n  } \n\n```\n\nYou 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.\n\n\n### Planned \n  - Mixin to trigger methods on breakpoint change\n  - Add and remove classes instead of changing only the style\n\n# License\nMIT [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freinerba%2Fvue-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freinerba%2Fvue-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freinerba%2Fvue-responsive/lists"}