vue3-mq

import { createApp } from 'vue'; import App from './App.vue'; import { createMq, useMq, MqLayout } from 'vue3-mq'; const app = createApp(App); app.use(createMq, { defaultBreakpoint: 'lg', // Optional, set a default breakpoint breakpoints: { // Optional, custom breakpoints sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536 }, // Alternatively, use a preset: // preset: 'bootstrap5', mergeBreakpoints: { 'custom-large': 1920 } }); app.mount('#app'); // In a Vue component (e.g., App.vue): // <script setup lang="ts"> // import { MqLayout, useMq } from 'vue3-mq'; // const mq = useMq(); // // Reactive check for current breakpoint // console.log('Current breakpoint:', mq.current.value); // </script> // <template> // <div> // <h1>Vue3-MQ Demo</h1> // <!-- Conditional rendering with MqLayout component --> // <mq-layout mq="sm"> // <p>This content is visible only on small screens (sm).</p> // </mq-layout> // <mq-layout mq="md+"> // <p>This content is visible on medium screens (md) and larger.</p> // </mq-layout> // <!-- Using slots for more complex rendering --> // <mq-layout group> // <template #sm> // <p>Using a slot for small screens.</p> // </template> // <template #md-xl> // <p>Using a slot for medium to extra-large screens.</p> // </template> // </mq-layout> // <!-- Programmatic access to media query state --> // <p v-if="mq.current.value === 'sm'">Current screen is small (programmatic check).</p> // <p v-else-if="mq.mdPlus.value">Current screen is medium or larger (programmatic check).</p> // </div> // </template>