vue-screen-utils

// App.vue (Parent component where screens are configured) <script setup lang="ts"> import { useScreens } from 'vue-screen-utils'; import ChildComponent from './ChildComponent.vue'; // Assume this file exists and is imported // Configure screen breakpoints. This call also automatically 'provides' the screen utilities // under the key '$screens' (or a custom injectKey if specified). useScreens({ xs: '0px', // Example: (min-width: 0px) sm: '640px', md: '768px', lg: '1024px', xl: '1280px' }); </script> <template> <div style="font-family: sans-serif; padding: 20px;"> <h1>Parent Component</h1> <p>This component sets up the global screen utilities.</p> <ChildComponent /> </div> </template> // ChildComponent.vue (Child component accessing screen utilities) <script setup lang="ts"> import { inject, computed } from 'vue'; import type { Screens } from 'vue-screen-utils'; // Inject the screens object that was provided by the parent via useScreens. // Type assertion `!` can be used if you're certain it will be injected, or handle `null`. const $screens = inject<Screens>('$screens'); // Defensive check for robustness, especially in complex applications if (!$screens) { console.error("Screen utilities not injected. Ensure useScreens is called in an ancestor."); // In a real application, you might provide fallback values or throw an error. } // Access reactive screen properties and utility functions const currentScreen = computed(() => $screens?.current.value || 'N/A'); const isLargeScreen = computed(() => $screens?.matches.lg || false); const mappedValue = computed(() => $screens?.mapCurrent({ xs: 0, sm: 1, md: 2, lg: 3, xl: 4 }, 0).value || 0 ); </script> <template> <div style="border: 1px solid #ccc; padding: 15px; margin-top: 20px;"> <h2>Child Component</h2> <p>Resize your browser window to see reactive updates:</p> <p>Current screen: <strong>{{ currentScreen }}</strong></p> <p>Is 'large' (>=1024px): <strong>{{ isLargeScreen }}</strong></p> <p>Mapped value for current screen: <strong>{{ mappedValue }}</strong></p> <p v-if="currentScreen === 'xl'" style="color: #007bff;">You're on an extra-large screen!</p> </div> </template>