v4.0.0 - A modern stack

Version 4 of Vue3 MQ mostly brings changes to how the plugin is packaged.

• Changed to ESM-first package. While the package still exports in 4 formats (CJS, ESM, IIFE and UMD), the package type is now set to "module".
• Jest testing library dropped in favour of Vitest
• ESLint v9's flat config introduced
• Experimenting with JSDOC-powered type building

New Features

• Added vuetify3 preset (see https://vuetifyjs.com/en/features/display-and-platform/#breakpoints-and-thresholds)

Bug Fixes

• MQResponsive is not referenced when in global mode ( thanks https://github.com/rfostii )

v3.1.1 - Bug Fix

• Updating breakpoints at runtime will no longer emit a preset error: resolves #17

v3.0.0 The Reimagining

Vue 3 MQ was initially a fork of Alexandre Bonaventure's 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 vue3-mq.info for a full migration guide, 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.

v2.3.3 Bug Fixes

• Fixed issue with the mq prop when using a minus modifier
• Added tests for store.js for shouldRender

v2.3.0 Breakpoint slots for the mq-layout component

In addition to the mq="sm" property on the component, you can now also use breakpoint slots which can combine with Transition Groups for more powerful and complex renderings.

<mq-layout group>
    <template #sm>For small screens only</template>
    <template #md-xl>For medium to extra-large screens only</template>
    <template #sm:2>Another slot for small screens only</template>
    <template #lg->For large and smaller screens</template>
</mq-layout>

There is also now a demo site available at https://craigrileyuk.github.io/vue3-mq/

v2.2.0: New <mq-layout> Minus and Range Prop Selectors

When using the <mq-layout> component within your Vue 3 app, you'll now be able to use 2 additional selector types:

• Minus: mq="lg-" - Will render on lg or below breakpoints... NEW
• Range: mq="xs-md" - Will render on any screen sizes between xs and md... NEW
• Plus: mq="md+" - Renders on any screen sizes above md
• Single: mq="lg" - Only renders on lg screen sizes
• Array: :mq="['xs','sm','xl']" - Renders on xs, sm and xl screen sizes

v2.1.0: Update Breakpoints

An update function is now provided by the plugin which allows components to dynamically change the breakpoints that are responded to.