This package is only a prototype for now. Let me know if you find this useful and I will continue to work on it.
Have you ever wanted to build a vue component that was responsive to the containing element, rather than the window size? Now you can :)
I built this directive from looking at the amazing package css-element-queries. I ran into some performance issues using css-element-queries with dynamic elements coming in and out of vue, so I rewrote some of the core implementation with Vue in mind.
I plan to replace ResizeSensor at some point, and there may be many, many bugs as it's not nearly as flexible as css-media-queries. Send me feedback please!
How To Use VueElementQuery
Take the package for a spin using the latest vue-cli vue serve ./example
Install the plugin as you normally would with Vue.use(VueElementQuery)
import VueElementQuery from 'vue-element-queries'
Vue.use(VueElementQuery)
This makes the directive v-query available to you. Add this directive to the containing element you want your components to respond to.
<div v-query class="grid">
<div class="row">
<panel class="item"></panel>
<panel class="item"></panel>
<panel class="item"></panel>
<panel class="item"></panel>
<panel class="item"></panel>
</div>
</div>
This will watch the container and apply tags to the element for min-width and max-width. You can then target these tags in your css to make your components responsive.
<style scoped> // scoped is required
.grid[min-width="500px"] .item {
flex-basis: 50%;
}
</style>
Note: stylesheets must be scoped for the current implementation of vue-element-queries.
Take a look at Example.vue in the example directory. You can use the sass mixins provided to clean up your css quite a bit.
<style lang="scss" scoped>
@import './sass/grid';
@import './sass/mixins';
.grid {
@include query(500) {
.item {
@include span(6)
}
}
@include query(800) {
.item {
@include span(4)
}
}
}
</style>