Vue- display screen: Sensitive media concerns - Vue.js Supplied #.\n\nCaution: Variation 2.x just assists Vue 3. v1 docs are actually on call listed here.\n\n\n\n\nSensitive display measurements and also media inquiry conditions for Vue. Assists your favourite UI framework out of package, and also can be set up with any sort of custom breakpoints.\n\nhttps:\/\/reegodev.github.io\/vue-screen.\n\nSensitive and debounced monitor dimension.\nReactive media concern states and gadget alignment.\nFind touch screen functionality.\nBreakpoints for many typical ui structures delivered out of the box: Tailwind, Bootstrap, Bulma, Structure, Materialize, Semantic User Interface.\nSSR appropriate along with Nuxt element consisted of. Nuxt component growth is actually pending Nuxt 3 launch.\n\nnpm i vue-screen.\nyarn add vue-screen.\n\nUsage with composition API.\nimport useScreen, useGrid from 'vue-screen'.\n\nexport default \nsetup() \nconst display = useScreen().\nconst network = useGrid(' bulma').\n\nyield \nscreen,.\nnetwork.\n\n\n\nFor enhanced configurations, have a look at the doctors site.\nUsage as a plugin.\nimport createApp from 'vue'.\nimport VueScreen coming from 'vue-screen'.\n\n\/\/ In App.vue.\ncreateApp()\n. usage( VueScreen, 'bootstrap')\n. install('
app').// In MyComponent.vue.Existing breakpoint is: $grid.breakpointHome window size is: $screen.widthHome window height is: $screen.height
v2 introduces a couple of breaking adjustments both in the arrangement and also in the API.Learn more concerning them in the docs area.
Articles You Can Be Interested In