Detect when an element is becoming visible or hidden on the page.

Related tags

vue-observe-visibility
Overview

vue-observe-visibility logo

vue-observe-visibility

Detect when an element is becoming visible or hidden on the page. Demo

Become a Patreon

Sponsors

sponsors logos


Table of contents

Installation

npm install --save vue-observe-visibility

⚠️ This plugin uses the Intersection Observer API that is not supported in every browser (currently supported in Edge, Firefox and Chrome). You need to include a polyfill to make it work on incompatible browsers.

Import

import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'

Vue.use(VueObserveVisibility)

Or:

import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'

Vue.directive('observe-visibility', ObserveVisibility)

Browser

<script src="vue.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the directives:

Vue.use(VueObserveVisibility)

Use specific directives:

Vue.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)

Usage

The v-observe-visibility directive is very easy to use. Just pass a function as the value:

<div v-observe-visibility="visibilityChanged">

This also works on components:

<MyComponent v-observe-visibility="visibilityChanged" />

The function will be called whenever the visiblity of the element changes with the argument being a boolean (true means the element is visible on the page, false means that it is not).

The second argument is the corresponding IntersectionObserverEntry object.

visibilityChanged (isVisible, entry) {
  this.isVisible = isVisible
  console.log(entry)
}

IntersectionObserver options

It's possible to pass the IntersectionObserver options object using the intersection attribute:

<div v-observe-visibility="{
  callback: visibilityChanged,
  intersection: {
    root: ...,
    rootMargin: ...,
    threshold: 0.3,
  },
}">

Once

It can be useful to listen for when the element is visible only once, for example to build introduction animations. Set the once option to true:

<div v-observe-visibility="{
  callback: visibilityChanged,
  once: true,
}">

Throttling visibility

You can use the throttle options (in ms) specifying minimal state duration after which an event will be fired. It's useful when you are tracking visibility while scrolling and don't want events from fastly scrolled out elements.

<div v-observe-visibility="{
  callback: visibilityChanged,
  throttle: 300,
}">

You can also pass a leading option to trigger the callback the first time when the visibility changes without waiting for the throttle delay. I can either be visible, hidden or both.

<div v-observe-visibility="{
  callback: visibilityChanged,
  throttle: 300,
  throttleOptions: {
    leading: 'visible',
  },
}">

Passing custom arguments

You can add custom argument by using an intermediate function:

<div v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, customArgument)">

Here visibilityChanged will be call with a third custom argument customArgument.

Disabling the observer

Passing a falsy value to the directive will disable the observer:

<div
  v-for="(item, index) of items"
  :key="item.id"
  v-observe-visibility="index === items.length - 1 ? visibilityChanged : false"
>

Example

<div id="app">
  <button @click="show = !show">Toggle</button>
  <label>
    <input type="checkbox" v-model="isVisible" disabled/> Is visible?
  </label>
  <div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    show: true,
    isVisible: true,
  },
  methods: {
    visibilityChanged (isVisible, entry) {
      this.isVisible = isVisible
      console.log(entry)
    },
  },
})
</script>

License

MIT

Issues
  • fix observer null issue

    fix observer null issue

    After several routing, I saw some element occur null exception on $nextTick. So I added checking logic for observer null or not. if ovserver is null, call estoryObserver().

    opened by onmylife 9
  • Support specifying the threshold

    Support specifying the threshold

    With inspiration from @d1manson issue #8

    opened by nickknissen 8
  • Pass parameters

    Pass parameters

    Is there a way to pass parameters to the function?

    question 
    opened by liepaja 6
  • How to use in Vue3 ? (rc.2)

    How to use in Vue3 ? (rc.2)

    Yes, I know Vue3 is not released yet. But 1. you will have to support it anyway very soon, 2. what about being the very first visibility observing component to support it?

    I tried the following in main.js:

    import { createApp } from 'vue'
    import App from './App.vue'
    import VueObserveVisibility from 'vue-observe-visibility'
    
    const app = createApp(App)
    app.component('observe-visibility', VueObserveVisibility)
    app.mount('#app')
    

    Also tried app.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)instead of the component line. In both cases it gets compiled and runs with no errors but the callback is not called when the div is scrolled in/out of view.

    What I am doing wrong? / If it is not supposed to work under Vue3 what is the cause. Thank you.

    opened by cimpok 6
  • Problem on safari using nuxt

    Problem on safari using nuxt

    I'm using this on a nuxt project and i'm not able to make it work on safari or mobile (ios) does anyone was able to set it up correctly on nuxt?

    opened by shutt 4
  • Occasionally misses an intersection taking place

    Occasionally misses an intersection taking place

    Hi,

    We are checking out the directive and were wondering if you are occasionally finding it 'misses' something arriving in the viewport until it is scrolled off the screen and back on again. We are looking in to what might cause it and will submit further if we find a bug ourselves, but have you had any experience of this before? Speed of scrolling does not seem to make a difference.

    Thanks for any advice you can give,

    Ben

    opened by bengallienne 4
  • error after import

    error after import

    vue 2 with webpack 2

    yarn add intersection-observer vue-observe-visibility
    
    import 'intersection-observer'
    import VueObserveVisibility from 'vue-observe-visibility'
    // or import {VueObserveVisibility} from 'vue-observe-visibility'
    

    then

    error  in ./~/vue-observe-visibility/index.js
    
    Module parse failed: ~/Projects/js/revel/node_modules/vue-observe-visibility/index.js Unexpected token (1:20)
    You may need an appropriate loader to handle this file type.
    | export default from './dist/vue-observe-visibility'
    | export * from './dist/vue-observe-visibility'
    | import './dist/vue-observe-visibility.css'
    
     @ ./src/main.js 12:0-62
     @ multi ./build/dev-client ./src/main.js
    

    Anything else I missed?

    opened by leopku 3
  • `rootMargin` has no effect

    `rootMargin` has no effect

    Greetings, I have a small problem related to rootMargin. I have a lazy image component:

    <img
      :src="loadedSrc"
      v-observe-visibility="{
        rootMargin,
        callback: handleVisibilityChange,
      }"
      class="base-image"
    >
    

    where rootMargin is a computed property related to a component height:

    ...
    computed: {
      rootMargin() {
        const { rootMarginBottom } = this;
        return `0px 0px ${rootMarginBottom}px 0px`;
      },
    },
    mounted() {
      const { $el } = this;
      this.$nextTick(() => {
        this.rootMarginBottom = $el.getBoundingClientRect().height * 3;
      });
    }
    ...
    

    The problem is that rootMargin has no effect on when callback is toggled. It is always when element is fully in the viewport. As you may guess I'm trying to preload image before it enters a viewport.

    It also works exactly the same way if i hardcode the rootMargin. It feels like its ignored...

    Can some one give me a hint where the problem is?

    Thank you in advance!

    opened by b12k 3
  • check if observer is not null

    check if observer is not null

    fixes cannot read property of 'observe' of null we get from time to time. The handle is somehow destroyed before nextTick is called, and then it's null which causes this error. Simple check if observer is still defined before doing "observe()" fixes it.

    opened by simllll 3
  • Infinite loop

    Infinite loop

    If I use this, then I run into infinite loop when it pushes value to array.

    addIndex (isVisible, entry, i) {
          if (isVisible) {
            this.indicesInViewPort.push(i)
          } 
        }
    

    This fires even if I don't scroll at all!

    opened by ChrisRobston 3
  • build(deps): [security] bump browserslist from 4.16.0 to 4.16.6

    build(deps): [security] bump browserslist from 4.16.0 to 4.16.6

    Bumps browserslist from 4.16.0 to 4.16.6. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service in browserslist The package browserslist from 4.0.0 and before 4.16.5 are vulnerable to Regular Expression Denial of Service (ReDoS) during parsing of queries.

    Affected versions: >= 4.0.0 < 4.16.5

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies security 
    opened by dependabot-preview[bot] 0
  • build(deps): [security] bump hosted-git-info from 2.8.8 to 2.8.9

    build(deps): [security] bump hosted-git-info from 2.8.8 to 2.8.9

    Bumps hosted-git-info from 2.8.8 to 2.8.9. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service in hosted-git-info The npm package hosted-git-info before 3.0.8 are vulnerable to Regular Expression Denial of Service (ReDoS) via regular expression shortcutMatch in the fromUrl function in index.js. The affected regular expression exhibits polynomial worst-case time complexity

    Affected versions: < 2.8.9

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies security 
    opened by dependabot-preview[bot] 0
  • build(deps): [security] bump lodash from 4.17.20 to 4.17.21

    build(deps): [security] bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Command Injection in lodash lodash versions prior to 4.17.21 are vulnerable to Command Injection via the template function.

    Affected versions: < 4.17.21

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies security 
    opened by dependabot-preview[bot] 0
  • Upgrade to GitHub-native Dependabot

    Upgrade to GitHub-native Dependabot

    Dependabot Preview will be shut down on August 3rd, 2021. In order to keep getting Dependabot updates, please merge this PR and migrate to GitHub-native Dependabot before then.

    Dependabot has been fully integrated into GitHub, so you no longer have to install and manage a separate app. This pull request migrates your configuration from Dependabot.com to a config file, using the new syntax. When merged, we'll swap out dependabot-preview (me) for a new dependabot app, and you'll be all set!

    With this change, you'll now use the Dependabot page in GitHub, rather than the Dependabot dashboard, to monitor your version updates, and you'll configure Dependabot through the new config file rather than a UI.

    If you've got any questions or feedback for us, please let us know by creating an issue in the dependabot/dependabot-core repository.

    Learn more about migrating to GitHub-native Dependabot

    Please note that regular @dependabot commands do not work on this pull request.

    dependencies 
    opened by dependabot-preview[bot] 0
  • build(deps-dev): bump eslint-plugin-html from 5.0.5 to 6.1.2

    build(deps-dev): bump eslint-plugin-html from 5.0.5 to 6.1.2

    Bumps eslint-plugin-html from 5.0.5 to 6.1.2.

    Changelog

    Sourced from eslint-plugin-html's changelog.

    2021-03-08 v6.1.2

    • Update htmlparser2 #141
    • Update dependencies

    2020-11-11 v6.1.1

    • Update dependencies
    • Move from travis to github actions

    2020-09-06 v6.1.0

    • Allow dots in extensions #127

    2020-08-08 v6.0.3

    • Update dependencies

    2020-04-15 v6.0.2

    • Remove npm-shrinkwrap.json from the npm package #125

    2020-04-05 v6.0.1 (the 5th anniversary release)

    • Update dependencies
    • Run CI against [email protected]
    • Add eslint-plugin-php-markup reference to the README

    2019-06-26 v6.0.0 (the 666 release)

    • Breaking: drop Node 6 support
    • Fix support for ESLint v6
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies 
    opened by dependabot-preview[bot] 0
  • build(deps-dev): bump nodemon from 1.19.4 to 2.0.7

    build(deps-dev): bump nodemon from 1.19.4 to 2.0.7

    Bumps nodemon from 1.19.4 to 2.0.7.

    Release notes

    Sourced from nodemon's releases.

    v2.0.7

    2.0.7 (2021-01-06)

    Bug Fixes

    v2.0.6

    2.0.6 (2020-10-19)

    Bug Fixes

    v2.0.5

    2.0.5 (2020-10-13)

    Bug Fixes

    v2.0.4

    2.0.4 (2020-05-14)

    Bug Fixes

    v2.0.3

    2.0.3 (2020-04-08)

    Bug Fixes

    • package.json & package-lock.json to reduce vulnerabilities (a4490e2)

    v2.0.2

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies 
    opened by dependabot-preview[bot] 0
  • build(deps-dev): bump cross-env from 5.2.1 to 7.0.3

    build(deps-dev): bump cross-env from 5.2.1 to 7.0.3

    Bumps cross-env from 5.2.1 to 7.0.3.

    Release notes

    Sourced from cross-env's releases.

    v7.0.3

    7.0.3 (2020-12-01)

    Bug Fixes

    • add maintenance mode notice (fe80c84)

    v7.0.2

    7.0.2 (2020-03-05)

    Reverts

    v7.0.1

    7.0.1 (2020-03-03)

    Bug Fixes

    v7.0.0

    7.0.0 (2020-01-25)

    Features

    BREAKING CHANGES

    • Drop Node 8 support

    v6.0.3

    6.0.3 (2019-10-02)

    Bug Fixes

    • do not compile anything (67f21c3)

    v6.0.2

    6.0.2 (2019-10-01)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies 
    opened by dependabot-preview[bot] 0
  • Errors on pages that have element id ==

    Errors on pages that have element id == "Vue"

    On pages that have an element with id "Vue", the plugin will error due to it's checking window.Vue and attempting to call Vue.use().

    i.e. on https://mdbootstrap.com/docs/jquery/navigation/footer/, a browser extension that makes use of vue-observe-visibility will break.

    image

    If it can be patched that'd be awesome. Thanks!

    opened by nireve 0
  • build(deps): [security] bump acorn from 6.3.0 to 6.4.2

    build(deps): [security] bump acorn from 6.3.0 to 6.4.2

    Bumps acorn from 6.3.0 to 6.4.2. This update includes security fixes.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Moderate severity vulnerability that affects acorn, minimist, and svjsl There are high severity security vulnerabilities in two of ESLints dependencies: - acorn - minimist

    The releases 1.8.3 and lower of svjsl (JSLib-npm) are vulnerable, but only if installed in a developer environment. A patch has been released (v1.8.4) which fixes these vulnerabilities.

    Identifiers:

    • CVE-2020-7598
    • SNYK-JS-ACORN-559469 (doesn&#39;t have a CVE identifier)

    Affected versions: >= 6.0.0 < 6.4.1

    Sourced from The GitHub Security Advisory Database.

    Moderate severity vulnerability that affects acorn and minimist minimist before 1.2.2 could be tricked into adding or modifying properties of Object.prototype using a "constructor" or "proto" payload.

    Affected versions: >= 6.0.0 < 6.4.1

    Commits
    • f6b83ed Mark version 6.4.2
    • f51895b Fix potentially-exponential regular expression in use-strict-scanning
    • 9a2e9b6 Mark version 6.4.1
    • 90a9548 More rigorously check surrogate pairs in regexp validator
    • df0cf1a Mark version 6.4.0
    • 5303412 Also export Parser via Parser.acorn
    • efe273e give token types and etc to plugins
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies security 
    opened by dependabot-preview[bot] 0
  • Vue 3 support

    Vue 3 support

    Would be great to use this with Vue 3 😅

    opened by tu4mo 1
Releases(v2.0.0-alpha.1)
  • v2.0.0-alpha.1(Dec 28, 2020)

  • v1.0.0(Dec 28, 2020)

  • v0.4.6(Oct 23, 2019)

  • v0.4.5(Oct 20, 2019)

    New

    • throttle leading options, closes #113

    You can also pass a leading option to trigger the callback the first time when the visibility changes without waiting for the throttle delay. I can either be visible, hidden or both.

    <div v-observe-visibility="{
      callback: visibilityChanged,
      throttle: 300,
      throttleOptions: {
        leading: 'visible',
      },
    }">
    

    Fixed

    • SSR: Fix the rendering issue with ssr load #148
    Source code(tar.gz)
    Source code(zip)
  • v0.4.4(May 6, 2019)

  • v0.4.3(Oct 4, 2018)

    New

    • once option, closes #11. This is useful to create one-time animations as soon as the element becomes visible!

    Improved

    • add typings (#29)

    Fixed

    • deepEqual issue

    In previous releases:

    • uncesseray re-creation of observer, fixes #24
    • #22 cannot read property 'bind' of undefined
    • #18 threshold undefined
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(May 28, 2018)

  • v0.3.1(Sep 18, 2017)

Owner
Guillaume Chau
Web & JavaScript enthusiast, @vuejs core team.
Guillaume Chau
Vue directive to detect resize events with deboucing and throttling capacity.

Vue.resize Vue directive to detect HTML resize events based on CSS Element Queries with debouncing and throttling capacity. Demo Typical usage Simple

David Desmaisons 322 Jun 3, 2021
🔲 Vue directive to react on clicks outside an element without stopping the event propagation

v-click-outside Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues and menus amon

Nicolas Del Valle 800 Jun 12, 2021
Vue 2.x directive to help a specified element listen for specific events occurring outside of itself.

vue-outside-events Vue 2.x directive to react on events outside of an element without stopping the event's propagation. Works well for handling clicks

Nicholas Hutchind 55 Jun 3, 2021
Reusable clickaway directive for reusable Vue.js components

vue-clickaway Reusable clickaway directive for reusable Vue.js components Overview Sometimes you need to detect clicks outside of the element (to clos

Denis Karabaza 933 May 30, 2021
Directive to create mouse selection of objects in Vue.js applications

vue-selectable Overview It's common task to make mouse selection of some objects on the page. This directive makes this task extremely easy, all you n

Dmitry Zlygin 62 Apr 13, 2021
Vue-ShortKey - The ultimate shortcut plugin to improve the UX

Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener. Install npm install vue-shortkey --save Usage Vue.use(require

Fagner Araujo 748 May 29, 2021
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions based on elements' positions, based on viewport Demo demo page Installation npm $ npm install vue-waypoint --save-dev Vu

Marco 'Gatto' Boffo 362 May 31, 2021
⌨️ Register global events as a component

vue-global-events Add shortcuts by listening to events on the document, anywhere This is the version for Vue 2, if you are looking for the Vue 3 versi

Damian Dulisz 654 Jun 13, 2021
Vue directive plugin for drag event detection.

v-dragged Vue directive plugin for drag event detection. NOTE: This directive listens for mouse/touch events, and sets a handler for when a drag actio

Chris Zhan 87 May 7, 2021
Check Browser Edge Reactively:sparkles:

vue-edge-check English / 中文 Check Browser Edge Reactively.To prevent transition effect triggered oddly when swipe edge with vue-router ✨ Before After

顾凡 27 Jun 17, 2020
Fires an event on a specific scroll position

vue-scrollfire Fires an event on a specific scroll position Demo Install npm install --save-dev vue-scrollfire // [email protected] npm install --save-dev vue-s

null 25 Dec 30, 2020
Vue V2 directive to react on clicks outside an element.

v-click-outside-x Vue V2 directive to react on clicks outside an element. Install $ npm install --save v-click-outside-x $ yarn add v-click-outside-x

Graham Fairweather 88 Apr 24, 2021
🖼 Declaratively interface window/document/body in your Vue template

?? Pseudo Window Vue component to bind event-handlers or classes to window/document/body! Insert pseudo-window anywhere in your template: <pseudo-wind

hiroki 24 May 10, 2021
Vue 2.x directive for binding hotkeys to components.

v-hotkey Vue 2.x directive for binding hotkeys to components. Play with me https://dafrok.github.io/v-hotkey Install $ npm i v-hotkey # or $ yarn add

马金花儿 626 May 26, 2021