The MQ Object

Vue3-Mq provides your app with a fully reactive object detailing the environment that it's operating within. This includes the screen size, orientation and OS/browser theme preference (i.e. dark mode).

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

Notice that booleans are created for each of your provided breakpoints to allow you to easily respond to different size screens.

You can access this object inside your Vue 3 application like so:

Composition API

<script setup>
import { useMq } from "vue3-mq";

const mq = useMq();
</script>

Options API

<script>
export default {
	inject: ["mq"],
};
</script>