{"id":15039,"library":"vue-mq","title":"Vue MQ: Responsive Design Plugin","description":"Vue MQ is a Vue.js plugin designed to simplify responsive web design by providing a declarative and semantic approach to handling media queries. It integrates directly into Vue instances, exposing a reactive `$mq` property that reflects the current breakpoint. Additionally, it offers a `MqLayout` component for conditional rendering of content based on specified breakpoints, including support for ranges (e.g., `md+`) and multiple specific breakpoints. The current stable version is 1.0.1, with significant updates like Server-Side Rendering (SSR) support introduced in v1.0.0. Releases appear to be infrequent, focusing on stability and key features. A core differentiator is its mobile-first design philosophy, particularly evident in its filter utility, allowing developers to define breakpoints centrally and manage responsive behavior directly within Vue templates and component logic, rather than relying solely on CSS media queries. This abstraction aims to streamline the development of responsive user interfaces.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/AlexandreBonaventure/vue-mq","tags":["javascript"],"install":[{"cmd":"npm install vue-mq","lang":"bash","label":"npm"},{"cmd":"yarn add vue-mq","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-mq","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; this package is built for Vue 2 applications.","package":"vue","optional":false}],"imports":[{"note":"VueMq is the default export for the plugin. The MqLayout component and `$mq` instance property are globally registered upon plugin installation and are not imported directly.","wrong":"import { VueMq } from 'vue-mq'","symbol":"VueMq","correct":"import VueMq from 'vue-mq'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueMq from 'vue-mq';\n\n// Create a root element for the Vue application in a browser environment\nconst appElement = document.createElement('div');\nappElement.id = 'app';\ndocument.body.appendChild(appElement);\n\n// Install the Vue MQ plugin with custom breakpoints\nVue.use(VueMq, {\n  breakpoints: { // Define custom, named breakpoints\n    xs: 0,\n    sm: 450,\n    md: 800,\n    lg: 1250,\n    xl: Infinity\n  },\n  defaultBreakpoint: 'sm' // Customize for SSR or initial state\n});\n\n// Create a new Vue instance to demonstrate reactive behavior\nnew Vue({\n  el: '#app',\n  data: {\n    appMessage: 'Responsive Demo with Vue MQ'\n  },\n  computed: {\n    // Reactive computed property based on the current breakpoint\n    displayText() {\n      return this.$mq === 'sm' ? 'Viewing on a small screen!' : `Current breakpoint: ${this.$mq}`;\n    }\n  },\n  template: `\n    <div>\n      <h1>{{ appMessage }}</h1>\n      <p>{{ displayText }}</p>\n\n      <!-- Conditional rendering using MqLayout component -->\n      <mq-layout mq=\"sm\">\n        <p>This content is specifically for small screens (sm).</p>\n      </mq-layout>\n\n      <mq-layout mq=\"md+\">\n        <p>This content displays on medium screens and larger (md, lg, xl).</p>\n      </mq-layout>\n\n      <mq-layout :mq=\"['lg', 'xl']\">\n        <p>This content shows on large or extra-large screens (lg or xl).</p>\n      </mq-layout>\n\n      <!-- Using the $mq property with the mq filter for dynamic props -->\n      <div style=\"border: 1px solid #ccc; padding: 10px; margin-top: 20px;\">\n        <p>Dynamic grid columns via filter: <strong>{{ $mq | mq({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }) }}</strong></p>\n        <p>Resize your browser window to see the breakpoints and content change!</p>\n      </div>\n    </div>\n  `,\n});","lang":"javascript","description":"Demonstrates Vue MQ installation, reactive `$mq` property usage, the `MqLayout` component for conditional rendering, and the `mq` filter for dynamic values based on breakpoints."},"warnings":[{"fix":"For Vue 3 projects, install `vue3-mq` (e.g., `npm install vue3-mq`) and consult its documentation for usage. Do not attempt to use `vue-mq`.","message":"This `vue-mq` package is exclusively for Vue 2 applications. It is not compatible with Vue 3. For Vue 3 projects, you must use the `vue3-mq` package, which has a distinct API and installation method.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Include a `matchMedia` polyfill (e.g., from github.com/paulirish/matchMedia.js) to ensure broader browser compatibility, especially for legacy browsers and IE.","message":"Older browsers and Internet Explorer do not natively support the `matchMedia` API, which `vue-mq` relies on for responsive functionality. Without a polyfill, responsive features will not work as expected in these environments.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always define explicit values for all breakpoints where behavior should differ, or be aware that unspecified breakpoints will inherit values from smaller defined breakpoints in a mobile-first cascade.","message":"The `$mq | mq` filter operates with a mobile-first philosophy. If values are omitted for intermediate breakpoints, the filter will fall back to the value defined for the next smallest breakpoint. This can lead to unexpected behavior if not understood.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import VueMq from 'vue-mq'; Vue.use(VueMq, { breakpoints: {...} });` is executed before your Vue application or components are mounted.","cause":"The `vue-mq` plugin, which globally registers the `MqLayout` component, has not been installed or has not been installed correctly via `Vue.use()`.","error":"[Vue warn]: Unknown custom element: <mq-layout> - did you register the component correctly?"},{"fix":"Verify that `Vue.use(VueMq, ...)` is called once and correctly at your application's entry point. Ensure `$mq` is only accessed within Vue component instances (e.g., in `template`, `computed`, `methods`).","cause":"The `$mq` instance property is injected into Vue instances by the `vue-mq` plugin. This error indicates the plugin was not successfully installed or the code attempting to access `$mq` is outside a Vue component context.","error":"TypeError: this.$mq is undefined"},{"fix":"Integrate a `matchMedia` polyfill into your project to provide the necessary API for older browsers. Common polyfills are available on GitHub.","cause":"The browser environment (e.g., Internet Explorer, older versions of Chrome/Firefox) lacks native support for the `window.matchMedia` API, which `vue-mq` uses to detect breakpoint changes.","error":"Responsive behavior does not update or screen size changes are not detected in older browsers."}],"ecosystem":"npm"}