{"id":15019555,"url":"https://github.com/e2o/vue-element-query","last_synced_at":"2025-10-24T12:31:25.479Z","repository":{"id":40680502,"uuid":"140245449","full_name":"e2o/vue-element-query","owner":"e2o","description":" VueJS mixin plugin for creating element size queries in components","archived":false,"fork":false,"pushed_at":"2022-11-21T14:11:08.000Z","size":288,"stargazers_count":54,"open_issues_count":1,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T01:24:48.317Z","etag":null,"topics":["component","element","mixin","plugin","queries","query","resizeobserver","responsive","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/e2o.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-09T07:10:42.000Z","updated_at":"2023-12-05T17:25:00.000Z","dependencies_parsed_at":"2023-01-21T07:45:22.167Z","dependency_job_id":null,"html_url":"https://github.com/e2o/vue-element-query","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e2o%2Fvue-element-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e2o%2Fvue-element-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e2o%2Fvue-element-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e2o%2Fvue-element-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/e2o","download_url":"https://codeload.github.com/e2o/vue-element-query/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964680,"owners_count":19394444,"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":["component","element","mixin","plugin","queries","query","resizeobserver","responsive","vue","vuejs"],"created_at":"2024-09-24T19:53:41.395Z","updated_at":"2025-10-24T12:31:25.042Z","avatar_url":"https://github.com/e2o.png","language":"JavaScript","readme":"# vue-element-query\n\n\u003ca href=\"https://www.npmjs.com/package/vue-element-query\"\u003e\u003cimg src=\"https://badgen.now.sh/npm/v/vue-element-query\" alt=\"NPM latest version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-element-query\"\u003e\u003cimg src=\"https://badgen.now.sh/npm/dm/vue-element-query\" alt=\"NPM total downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://badgen.now.sh/npm/license/vue-element-query\" alt=\"License\"\u003e\u003c/a\u003e\n\nVueJS mixin plugin for creating element size queries in components.\n\n_How does this library function under the hood?_\n\nThis plugin uses the [ResizeObserver API](https://wicg.github.io/ResizeObserver/) to observe element sizing changes.\nAs ResizeObserver is [not widely supported yet](https://caniuse.com/#feat=resizeobserver), we make use of this [ponyfill](https://www.npmjs.com/package/resize-observer-polyfill) to provide this API across non-supporting browsers.\n\n_How is this different than the other libraries out there?_\n\nThis plugin gives each component it's own sizing queries and active breakpoint state. [Other](https://github.com/scaccogatto/vue-viewports) [libraries](https://github.com/reinerBa/Vue-Responsive) [use](https://github.com/drenglish/vue-match-media) [the](https://github.com/jofftiquez/vue-media-query-mixin) [window](https://github.com/apertureless/vue-breakpoints) [size](https://github.com/AlexandreBonaventure/vue-mq) [to determine](https://github.com/SeregPie/VueResizeSensor) [breakpoints](https://github.com/adi518/vue-breakpoint-component). This is less powerful because each component should be able to define it's own behaviour without being aware of the components around it. And that's exactly what this plugin brings to you.\n\n* * *\n\n## Table of contents\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Example](#example)\n-   [Contributing](#contributing)\n-   [License](#license)\n\n* * *\n\n# Installation\n\n## Using NPM\n\n```sh\nnpm install vue-element-query --save\n```\n\n## Using Yarn\n\n```sh\nyarn add vue-element-query\n```\n\n## VueJS\n\nImport the plugin and register it with the current Vue instance.\n\n```js\nimport Vue from \"vue\";\nimport VueElementQuery from \"vue-element-query\";\n\nVue.use(VueElementQuery);\n```\n\nThis will make the mixin available for use in every component you register under this Vue instance.\n\n# Usage\n\n## Basic\n\nThe breakpoint queries passed in the `eq.breakpoints` option will have their active state exposed on the `$eq` object.\n\nAny combination of the following queries can be combined to create a breakpoint:\n\n-   `minWidth`\n-   `maxWidth`\n-   `minHeight`\n-   `maxHeight`\n\nA breakpoint will only be active when **all** of it's queries match.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eI'm a title that is always rendered.\u003c/h1\u003e\n    \u003ch2 v-if=\"$eq.medium\"\u003eOnly visible when my component has a medium size.\u003c/h2\u003e\n    \u003ch3 v-if=\"$eq.medium || $eq.large\"\u003eVisible on either medium or large size.\u003c/h3\u003e\n    \u003ch4 :class=\"{'very-tiny': $eq.small}\"\u003eI get a special class when my component is small.\u003c/h4\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  eq: {\n    breakpoints: {\n      small: { maxWidth: 499 },\n      medium: { minWidth: 500, maxWidth: 1199 },\n      large: { minWidth: 1200 },\n      potato: { minHeight: 123, maxHeight: 1234 }\n      ...\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n## Watching component size changes\n\nA listener can be set on the breakpoint states, to watch them get (de-)activated.\nThis way you can trigger additional actions if needed on separate component sizes.\n\n```js\nexport default {\n  eq: {\n    breakpoints: {\n      small: { maxWidth: 499 },\n      medium: { minWidth: 500, maxWidth: 1199 },\n      large: { minWidth: 1200 }\n    }\n  },\n  watch: {\n    \"$eq.small\": function(newState) {\n      if (newState) console.log(\"small breakpoint activated\");\n      if (!newState) console.log(\"small breakpoint de-activated\");\n    },\n    \"$eq.medium\": function(newState) {\n      if (newState) console.log(\"medium breakpoint activated\");\n      if (!newState) console.log(\"medium breakpoint de-activated\");\n    },\n    \"$eq.large\": function(newState) {\n      if (newState) console.log(\"large breakpoint activated\");\n      if (!newState) console.log(\"large breakpoint de-activated\");\n    }\n  }\n};\n```\n\n## Waiting for ready state\n\nSince [v3.1.0]((https://github.com/e2o/vue-element-query/releases/tag/v3.1.0)) of this package, an additional property `$eq.ready` has been added. This can be useful in cases where you want to render a fallback-component, without explicitly defining a breakpoint for it:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003ccomponent1 v-if=\"$eq.medium\" /\u003e\n    \u003ccomponent2 v-else /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nIf the medium sized breakpoint is supposed to be active, without an `$eq.ready` wrapper `\u003ccomponent2 /\u003e` would render briefly until $eq is properly initialized, which may cause unwanted behaviour. In that case, you can wait for $eq to be properly set up:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003ctemplate v-if=\"$eq.ready\"\u003e\n      \u003ccomponent1 v-if=\"$eq.medium\" /\u003e\n      \u003ccomponent2 v-else /\u003e\n    \u003c/template\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Component1 from \"@/components/Component1\";\nimport Component2 from \"@/components/Component2\";\n\nexport default {\n  name: \"App\",\n  eq: {\n    breakpoints: {\n      medium: { minWidth: 500 },\n    },\n  },\n  components: {\n    Component1,\n    Component2,\n  },\n};\n\u003c/script\u003e\n```\n\n# Example\n\nA small example (mainly used for development and testing purposes) can be found inside the [example folder](./example)\n\n# Browser support\n\n![IE](https://raw.github.com/alrra/browser-logos/45.10.0/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/45.10.0/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/45.10.0/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/45.10.0/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/45.10.0/src/safari/safari_48x48.png)\n--- | --- | --- | --- | --- |\n10+ | 65+ | 59+ | 52+ | 10+ |\n\nFor a complete list of browsers, check [the browserlist query](http://browserl.ist/?q=last+2+major+versions%2C+%3E+1%25).\n\n_**Note:** other browsers than the ones listed might (and probably will) work as well._\n_Please refrain from opening issues for functionalities that are not working in these browsers._\n\n# Contributing\n\nFeel free to provide feedback, open issues or create pull-requests to this repository.\n\n# License\n\nvue-element-query is [MIT licensed](./LICENSE).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe2o%2Fvue-element-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fe2o%2Fvue-element-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe2o%2Fvue-element-query/lists"}