Vue- screen: Sensitive media queries - Vue.js Supplied #.\n\nCaution: Variation 2.x simply assists Vue 3. v1 docs are actually offered right here.\n\n\n\n\nResponsive monitor measurements and media inquiry conditions for Vue. Assists your favourite UI platform away from the box, and also may be set up along with any sort of custom breakpoints.\n\nhttps:\/\/reegodev.github.io\/vue-screen.\n\nReactive and debounced screen size.\nReactive media concern states and also device alignment.\nSense touch monitor functionality.\nBreakpoints for a lot of usual ui platforms given out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI.\nSSR appropriate along with Nuxt component consisted of. Nuxt module development is actually pending Nuxt 3 release.\n\nnpm i vue-screen.\nyarn include vue-screen.\n\nUsage with composition API.\nbring in useScreen, useGrid from 'vue-screen'.\n\nexport nonpayment \nsetup() \nconst screen = useScreen().\nconst framework = useGrid(' bulma').\n\nprofit \nscreen,.\nframework.\n\n\n\nFor advanced setups, look into the docs internet site.\nMake use of as a plugin.\nimport createApp coming from 'vue'.\nbring in VueScreen from 'vue-screen'.\n\n\/\/ In App.vue.\ncreateApp()\n. make use of( VueScreen, 'bootstrap')\n. install('
app').// In MyComponent.vue.Present breakpoint is actually: $grid.breakpointHome window width is actually: $screen.widthWindow height is actually: $screen.height
v2 presents a handful of breaking adjustments both in the configuration and in the API.Learn more regarding them in the docs area.
Articles You Can Be Interested In