craigrileyuk / vue3-mq

📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.

Bring fully reactive, responsive design to your Vue 3 project with Vue3-MQ, a plugin which allows your components and pages to adapt to changes in the browser environment.

• Completely customisable breakpoints
• Includes MQ-Responsive Vue component for unparalleled ease of use
• Access a fully reactive environment analysis object
• Adapt to your users' preference for light or dark themes
• React to changes in screen orientation
• Respect user preference for reduced motion direct in your Vue files
• Choose from a range of breakpoint presets, including Bootstrap 4, Bootstrap 5, Vuetify or Tailwind
• Render on single breakpoints, arrays of breakpoints or ranges

Documentation

Check out the documentation at Vue3 MQ: Github Pages.

License

MIT

Sponsor / Donate

Finding this package useful? Then help keep the coffee flowing.

Sponsor Craig Riley on Github

Other Packages by the Author

• Tailwind Fluid Typography
• Laravel Mix Ziggy Watch
• Vue 3 Snackbar
• Vue 3 Slide Up Down
• Vue 3 Icon

Bugs / Support

Please open an issue for support.

Thanks

Thanks to Alexandre Bonaventure for creating the Vue 2 project that this is based upon.

vue3-mq's Issues

Additional Media Features

Would love if this had some of the newer media features. Looking at some designs that are going to be coming my way having the pointer/any-pointer available would be quiet helpful

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features

BUG: Getting smMinus and smPlus both true at the same time

I am using tailwind preset, but at the size 756px for example I am getting both smMinus and smPlus as true :/

    "current": "sm",
    "xs": false,
    "smMinus": true,
    "smPlus": true,
    "sm": true,
    "mdMinus": true,
    "mdPlus": false,
    "md": false,
    "lgMinus": true,
    "lgPlus": false,
    "lg": false,
    "xlMinus": true,
    "xlPlus": false,
    "xl": false,
    "xxl": false,
    "orientation": "portrait",
    "isLandscape": false,
    "isPortrait": true,
    "theme": "light",
    "isDark": false,
    "isLight": true,
    "motionPreference": "no-preference",
    "isMotion": true,
    "isInert": false
}```

initially everything executes on all breakpoints

if I have

<mq-layout :mq="['sm']">
{{log('should not execute')}}
</mq-layout

and I am on desktop log() will execute. This causes a lot of double instances, for example click item which should create datepicker instance = creates 2 datepicker instances. Ofcourse workaround is to use flags, but flags are bad practice

Errors and incorrect breakpoint in Safari on Mac

Hi,

The package appears to be struggling in Safari on Mac (Safari 13.1 macOS Catalina).
The following is occurring:

• Error on load:
  TypeError: n.addEventListener is not a function. (In 'n.addEventListener("change",r)', 'n.addEventListener' is undefined)
• Which is thrown on line 334 in the function sanitiseBreakpoints():
  if (!['string', 'number'].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
• The reported breakpoint is SM no matter what the screen size. The functionality works correctly in Chrome on macOS Catalina.

Many thanks,

Jose

Cannot use string keys for breakpoints

Hi,

I want to use my own breakpoints like this :

app.use(Vue3Mq, {
  breakpoints: {
    'mob-s': 320,
    'mob-m': 425,
    'mob-l': 576,
    'tab-s': 640,
    'tab-m': 768,
    'tab-l': 992,
    'lap-s': 1024,
    'lap-m': 1280,
    'lap-l': 1366,
    'lap-xl': 1440,
    'lap-2xl': 1680,
    'lap-3xl': 1920,
  }
})

It's doesn't works

I use this, it's working fine :

app.use(Vue3Mq, {
  breakpoints: {
    test: 320,
  }
})

Other point : No declarations types availables 😢

No Typescript support

Hi @craigrileyuk,

are there any plans for Typescript support by adding a index.d.ts file?

Thanks for your answer

Console leftover

I get 2 console leftovers in my app due to vue3-mq:

vue3-mq/src/component.js

Line 21 in 1887068

console.log("Running setup()");

vue3-mq/src/component.js

Line 74 in 1887068

console.log(context.slots.default);

Typescript Error: Could not find declaration for module 'vue3-mq'

Hi Craig,

Many thanks for making the Vue 3 version of Vue MQ available.

I am getting the following typescript error while importing vue3-mq into the main.ts file in vue 3:

Could not find a declaration file for module 'vue3-mq'. './node_modules/vue3-mq/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue3-mq if it exists or add a new declaration (.d.ts) file containing declare module 'vue3-mq';ts(7016)

page is down

https://vue3-mq.info/ website is down

SSR Hydration issue

Hi @craigrileyuk ,
I am getting this error:

[Vue warn]: Hydration node mismatch:

• Client vnode: div
• Server rendered DOM:

at MqResponsive target="md+"

Mixins and Composition API

Due to mixins are available only in Options API Vue3Mq doesn't work if Options API is disabled.

Nuxt 3 SSR first loading

I noticed that there is a problem with detecting the breakpoint when the page is first loaded on SSR.
I suspect that this is because the server default breakpoint does not match with the client breakpoint.

import { defineNuxtPlugin } from "#app";
import { Vue3Mq } from "vue3-mq";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vue3Mq, {
defaultBreakpoint: 'mobile',
breakpoints: {
mobile: 0,
tabletSmall: 768,
tablet: 960,
desktop: 1025
}
})
});

<script setup> import { useMq } from "vue3-mq" const mq = useMq() </script>

<div :class="[{ 'fx': mq.desktop }]" />

<Button v-if="mq.desktop" />

If my defaultBreakpoint: 'mobile' and page load on 'desktop' breakpoint condition 'mq.desktop' does not work :(
And vice versa.

The only solution I found is to wrap it in <ClientOnly>. But then there is no sense in SSR.
Is there any solution to this problem?

<MqResponsive group> adding a div

this code:

<MqResponsive group>
  <template #xs-sm>
    <button><IconMenu /></button>
  </template>
</MqResponsive>

is resulting in this:

<div data-v-30d3c9d3="" mode="out-in">
  <div>
    <button data-v-30d3c9d3=""><svg>...</svg></button>
  </div>
</div>

is there a way I can get them without the div wrappers?

How to listen (watch) changes or subscribe to the events?

I want to execute some code (mainly change a value on a variable) when mq is smaller than md for example... how would I do that?

npm docs not up to date

I can see that you fixed a typo in an import statement in the docs.
The typo is still present in the docs on npmjs.com (https://www.npmjs.com/package/vue3-mq)

Error: MqResponsive is not referenced

Hi,
I've found an error: e.component("MqResponsive", MqResponsive) -> should be e.component("MqResponsive", he)
Thanks if you can fix it

Invalid module specifier in package.json

In the package.json the "module" and the "exports.import" should both point to ./dist/vue3-mq.mjs instead of to ./dist/vue3-mq.js. The latter is not in ES module format.

In my case, this leads to problems when bundling with vite to the "system" output format.

Support for orientation detection

Intended for v2.4.0

Add support for orientation detection and conditional rendering.

component could take portrait and landscape props which only render the component in that orientation.

Could also provide a global reactive variable like $mq for orientation.

If you have any thoughts/suggestions on this feature, feel free to comment.

This relative module was not found:

This relative module was not found:

• ./vue3-mq in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/Vue3Mq.vue?vue&type=script&lang=js

Doesn't work with Nuxt

 ERROR  12:24:23 PM [vite] Internal server error: Failed to resolve entry for package "vue3-mq". The package may have incorrect main/module/exports specified in its package.json.
  Plugin: vite:import-analysis
  File: /home/yektanet/Desktop/test-yekta-ui3/plugins/vue3-mq.js

Docs not available?

Hey there!
I just noticed the documentation on https://vue3-mq.info is down since some days already. 😱

Dynamic breakpoints give undefined error

On version 3.1.0

When using the updateBreakpoints functionality, we get the following error:

Vue3 Mq: "undefined" is not a valid preset. Available options are: bootstrap5, bootstrap4, bootstrap3, vuetify, tailwind, devices, wordpress

When we update the function call to include the following property: preset: 'tailwind', in addition to the breakpoints: {...}, the error disappears.

Usage with Nuxt 3

Sorry if this is unrelated to your library itself, but would it be possible to add an example to use it in Nuxt 3?

Thank you!