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.