Tile UI Vue
Source code

Composables

useMediaQuery

Read responsive state and viewport changes without rewriting browser event plumbing.

Use this composable to branch your UI on viewport size without wiring matchMedia listeners by hand.

Expanded mode simulates a desktop layout with more room for metadata and supporting actions.

import { defineComponent } from 'vue';
import { useMediaQuery } from '@tile-ui/vue';
 
export default defineComponent({
	name: 'UseMediaQueryDemo',
	setup() {

Registry install

pnpm dlx shadcn@latest add @tile-ui/use-media-query

Usage

const isMobile = useMediaQuery('(max-width: 768px)');

What it covers

  • Reactive matchMedia evaluation
  • Listener cleanup on unmount
  • A ref that updates when the query result changes

Common use cases

  • Rendering a compact mobile variant versus a denser desktop layout
  • Hiding secondary navigation on narrow viewports
  • Adjusting density or columns from a single breakpoint
PrevioususeLocalStorageNextExamples