Vue directive for conditional rendering element on screen smaller than breakpoints

Overview

vue-not-visible

Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints;

NPM

📺 Demo

Install

$ npm install --save vue-not-visible
$ yarn add vue-not-visible

Use default

import 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>

Use custom breakpoints

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>

License

MIT License

You might also like...
The word highlighter library for Vue 2 and Vue 3.
The word highlighter library for Vue 2 and Vue 3.

The word highlighter library for Vue 2 and Vue 3.

JSX for Vue 3 -  Babel Plugin JSX for Vue 3.0
JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

JSX for Vue 3 - Babel Plugin JSX for Vue 3.0

Paystack module for Vue that supports Vue 2 & 3.
Paystack module for Vue that supports Vue 2 & 3.

Vue-Paystack2 is a Paystack payment gateway integration for Vue which provides Universal support for Vue 2 & 3 Table of Contents ✨ Install ✨ Usage 📖

🛠️Vue kit of useful Vue Composition API functions
🛠️Vue kit of useful Vue Composition API functions

🛠️ Vue kit of useful Vue Composition API functions.

Provides reactivity window size properties for Vue.js

vue-window-size Provides reactivity window size properties for Vue.js. Install for Vue v3 The following command installs vue-window-size v1. $ yarn ad

↔ Vue component that scales its child node in relation to its parent node's width
↔ Vue component that scales its child node in relation to its parent node's width

vue-responsive-text Vue component that scales its child node in relation to its parent node's width Installation Install the package from npm by runni

simple vue plugin to implement underscore

vue-underscore You know Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, red

Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +50 different composables

vue-composable Out-of-the-box ready to use composables 🌴 TreeShakable 🧙‍♂️ Fully Typescript 💚 Vue 3 and 2 support 🔨 Vue Devtools support Introduct

Releases(v1.0.9)
Owner
Yuriy Panarin
McMakler(https://mcmakler.de) Software Engineer
Yuriy Panarin
trigger functions and events based on the element position on the screen

trigger functions and events based on the element position on the screen

Marco 'Gatto' Boffo 455 Dec 16, 2022
Vue.js directive that clamps the content of a text element if it exceeds specified number of lines.

Vue.js directive that clamps the content of a text element if it exceeds the specified number of lines. Supports Vue.js 2 as well as Vue.js 3.

Ajo Bilec 53 Dec 17, 2022
Vue Json Pretty - A Vue component for rendering JSON data as a tree structure.

Vue Json Pretty A Vue component for rendering JSON data as a tree structure. Now it supports Vue3 at least. If you still use Vue2, see 1.x. English |

Daniel 792 Dec 30, 2022
Vue Reactivity with Fine-Grained Rendering

VueRX JSX This library is a demonstration of how Vue's Reactivity system can be leveraged directly in JSX for considerably better performance than pai

Ryan Carniato 59 Dec 30, 2022
Vue plugin for advanced click directive

Vue plugin for advanced click directive

Zach Cardoza 26 Dec 27, 2022
Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Ivan Demchuk 164 Dec 28, 2022
Vue Use Utilities build on top of vue-demi & @vue/compostion-api

Vue Use Utilities Vue Use Utilities build on top of vue-demi & @vue/compostion-api. It works both for Vue 2 & 3. ✨ Features ?? Composable Utilities ??

Vue Blocks 28 Dec 12, 2022
Collection of essential Vue Composition Utilities for Vue 2 and 3

Collection of essential Vue Composition Utilities ?? Features ?? Interactive docs & demos ?? Seamless migration: Works for both Vue 3 and 2 ⚡ Fully tr

VueUse 96 Dec 23, 2022
Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.

vue2-migration-helper Transforms Vue.js SFCs to composition api syntax. Install npm i vue2-migration-helper CLI # convert all .vue files in source dir

Muhammad Ubaid Raza 26 Nov 1, 2022
🤲 Use Vue 3's Fragment feature in Vue 2 to return multiple root elements

?? Vue 2 fragment directive to return multiple root elements

hiroki osame 180 Dec 22, 2022