Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints;
📺 Demo
$ npm install --save vue-not-visible$ yarn add vue-not-visibleimport Vue from 'vue' import vueNotVisible from 'vue-not-visible' /* const BREAKPOINTS = { mobile: 425, tablet: 768, tablet_landscape: 1024, desktop: 1200, desktop_large: 1440, hd: 1920, } */ Vue.use(vueNotVisible) // this is default<template> <div id="test"> {{ message }} {{ count }} <div v-not-visible="'tablet'"> <div v-on:click="count = count + 1">Not visible on table(screen < 768)</div> </div> <div v-not-visible="'mobile'"> <div v-on:click="count = count + 1">Not visible on mobile(screen < 425)</div> </div> </div> </template>import Vue from 'vue' import vueNotVisible from 'vue-not-visible' Vue.use(vueNotVisible, {ipad: 1280}) // this is custom<template> <div id="test"> {{ message }} {{ count }} <div v-not-visible="'ipad'"> <div v-on:click="count = count + 1">Not visible on ipad(screen < 1280)</div> </div> </div> </template>