vue-mq

import Vue from 'vue'; import VueMq from 'vue-mq'; // Create a root element for the Vue application in a browser environment const appElement = document.createElement('div'); appElement.id = 'app'; document.body.appendChild(appElement); // Install the Vue MQ plugin with custom breakpoints Vue.use(VueMq, { breakpoints: { // Define custom, named breakpoints xs: 0, sm: 450, md: 800, lg: 1250, xl: Infinity }, defaultBreakpoint: 'sm' // Customize for SSR or initial state }); // Create a new Vue instance to demonstrate reactive behavior new Vue({ el: '#app', data: { appMessage: 'Responsive Demo with Vue MQ' }, computed: { // Reactive computed property based on the current breakpoint displayText() { return this.$mq === 'sm' ? 'Viewing on a small screen!' : `Current breakpoint: ${this.$mq}`; } }, template: ` <div> <h1>{{ appMessage }}</h1> <p>{{ displayText }}</p> <!-- Conditional rendering using MqLayout component --> <mq-layout mq="sm"> <p>This content is specifically for small screens (sm).</p> </mq-layout> <mq-layout mq="md+"> <p>This content displays on medium screens and larger (md, lg, xl).</p> </mq-layout> <mq-layout :mq="['lg', 'xl']"> <p>This content shows on large or extra-large screens (lg or xl).</p> </mq-layout> <!-- Using the $mq property with the mq filter for dynamic props --> <div style="border: 1px solid #ccc; padding: 10px; margin-top: 20px;"> <p>Dynamic grid columns via filter: <strong>{{ $mq | mq({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }) }}</strong></p> <p>Resize your browser window to see the breakpoints and content change!</p> </div> </div> `, });