vue-element-query
VueJS mixin plugin for creating element size queries in components.
How does this library function under the hood?
This plugin uses the ResizeObserver API to observe element sizing changes. As ResizeObserver is not widely supported yet, we make use of this ponyfill to provide this API across non-supporting browsers.
How is this different than the other libraries out there?
This plugin gives each component it's own sizing queries and active breakpoint state. Other libraries use the window size to determine breakpoints. 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.
Table of contents
Installation
Using NPM
npm install vue-element-query --save
Using Yarn
yarn add vue-element-query
VueJS
Import the plugin and register it with the current Vue instance.
;; Vue;
This will make the mixin available for use in every component you register under this Vue instance.
Usage
Basic
The breakpoint queries passed in the eq.breakpoints
option will have their active state exposed on the $eq
object.
Any combination of the following queries can be combined to create a breakpoint:
minWidth
maxWidth
minHeight
maxHeight
A breakpoint will only be active when all of it's queries match.
I'm a title that is always rendered. Only visible when my component has a medium size. Visible on either medium or large size. I get a special class when my component is small.
Watching component size changes
A listener can be set on the breakpoint states, to watch them get (de-)activated. This way you can trigger additional actions if needed on separate component sizes.
eq: breakpoints: small: maxWidth: 499 medium: minWidth: 500 maxWidth: 1199 large: minWidth: 1200 watch: { if newState console; if !newState console; } { if newState console; if !newState console; } { if newState console; if !newState console; } ;
Example
A small example (mainly used for development and testing purposes) can be found inside the example folder
Browser support
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
10+ | 65+ | 59+ | 52+ | 10+ |
For a complete list of browsers, check the browserlist query.
Note: other browsers than the ones listed might (and probably will) work as well. Please refrain from opening issues for functionality that is not working in these browsers.
Contributing
Feel free to provide feedback, open issues or create pull-requests to this repository.
License
vue-element-query is MIT licensed.