v3.0.0: The Reimagining

Vue 3 MQ was initially a fork of Alexandre Bonaventure'sopen in new window Vue MQ project with a few coding changes to help it to work with Vue 3 complete with a couple of extra features sprinkled on top.

Version 3 is a complete reimagining of the plugin. The code has been re-written from the group up to ensure it takes full advantage of the power of Vue 3 and offers a simple, yet powerful way to respond to vast number of environments your application has to operate in.

See our v2-3 migration guide for full details, but key changes are:

  • Global objects and components have been dropped in favour of imports/injections. This helps your app's size and performance by reducing overhead where it's not needed.
  • Support for detecting orientation ( landscape / portrait ) and theme ( dark / light)
  • The helper is now and the mq prop has become target.
  • mq is no longer a responsive value, but a full-blown reactive object. Quickly react to breakpoints, orientation and theme with a wide range of boolean values. Rendering on a mobile could be as simple as if (mq.mdMinus) { ... }
  • Choose from common presets (Bootstrap, Vuetify, Tailwind) to quickly get Vue3 MQ up and running with your UI of choice.
  • Full support for both Options API and Composition API builds of Vue3.