A Vue component to add intersection-observer to a Vue component or HTML element.

Overview

Vue Intersect

A Vue component to add intersection-observer to a Vue component or HTML element.

npm version Coverage Status Build status

Table of content

Introduction

The IntersectionObserver is an amazing API which allows you to observe one or more HTMLElement for when it has entered or left the viewport.

This API has many use cases like, infinite-scroll, lazy-loading or animations when an element enters the viewport.

Demo

We've made a basic demo of how you might want to use vue-intersect. The code is available in the gh-pages branch and the part where vue-intersect is used can be found here.

Hackernews infinite scroll demo

Please keep in mind that the demo is not production code. Use it as an inspiration.

Installation

Simply install using your favorite package manager 🔥

NPM

npm install vue-intersect --save

Yarn

yarn add vue-intersect

Usage

The package acts as an abstract component, much like what you may know from keep-alive or transition.

This means that it's basically a "decorator". A component which does not output any markup to the DOM, but adds the functionality under the hood 😱 .

.vue

<template>
  <intersect @enter="msg = 'Intersected'" @leave="msg = 'Not intersected'">
    <div>{{ msg }}</div>
  </intersect>
</template>

<script>
  import Intersect from 'vue-intersect'

  export default {
    components: { Intersect },
    data () {
      return {
        msg: 'I will change'
      }
    }
  }
</script>

Properties

Property Type Default Required Description
threshold Array [0, 0.2] no MDN docs
root HTMLElement null no MDN docs
rootMargin String 0px 0px 0px 0px no MDN docs

Events

Name Arguments Description
change IntersectionObserverEntry Event fired on any inte.
enter IntersectionObserverEntry Event fired when the element is intersected (visible on the screen)
leave IntersectionObserverEntry Event fired when the element is not intersected (not visible on the screen)
destroyed None Fired when the underlying element is destroyed

The enter and leave event is sugar, for an often performed operation. You still have to set the threshold to e.g. [0, 0.2] (default). If you leave out "0", it will never call the leave event.

The events is compliant with Vue's event modifiers. This means that you could add .once to the events to make sure you only trigger your event handler once.

Polyfill

The IntersectionObserver API is not currently available in all browsers (IE11, Safari and iOS Safari). If you intend to support these browsers, you'll need to add a poylfill to your bundle.

WICG IntersectionObserver Polyfill is highly recommended.

Comments
  • Nuxt: Cannot use import statement outside a module

    Nuxt: Cannot use import statement outside a module

    i get Cannot use import statement outside a module on first page load but if a remove the intersect part from my component and save the file and refresh the page, then the page load fine

    after that i add intersect back to my component and save it using HMR then the intersect works as expected until i refresh the page

    from this issue #23 i added transpile: ['vue-intersect'], to my build config but still the same error

    version: "vue-intersect": "^1.1.6",

    <template>
      <intersect @enter.once="onEnter">
        <div class="relative">
          <!-- Show the placeholder as background -->
          <blur-hash-img
            :hash="blurhash"
            :aspect-ratio="height / width"
            class="relative top-0 left-0 transition-opacity duration-500"
            :class="isLoaded ? 'opacity-0' : 'opacity-100'"
          />
    
          <!-- Show the real image on the top and fade in after loading -->
          <img
            ref="image"
            :width="width"
            :height="height"
            v-bind="$attrs"
            class="absolute top-0 left-0 w-full transition-opacity duration-500 cursor-pointer"
            :class="isLoaded ? 'opacity-100' : 'opacity-0'"
          />
        </div>
      </intersect>
    </template>
    
    <script>
    import Intersect from 'vue-intersect'
    export default {
      components: {
        Intersect,
      },
      inheritAttrs: false,
      props: {
        src: {
          type: String,
          required: true,
        },
        blurhash: {
          type: String,
          required: false,
          default: null,
        },
        width: {
          type: Number,
          default: 1,
        },
        height: {
          type: Number,
          default: 1,
        },
      },
      data() {
        return {
          isVisible: false,
          isLoaded: false,
        }
      },
      methods: {
        onEnter() {
          // Image is visible (means: has entered the viewport),
          // so start loading by setting the src attribute
          this.$refs.image.src = this.src
          this.$refs.image.onload = () => {
            // Image is loaded, so start fading in
            // is visible a little longer
            setTimeout(() => {
              this.isLoaded = true
            }, 500)
          }
        },
      },
    }
    </script>
    
    opened by kgnfth 6
  • Error in IE11 even with Polyfill

    Error in IE11 even with Polyfill

    First off, thanks for the plugin!

    I have the Intersection Observer polyfill installed and am able to console.log the IntersectionObserver to confirm that it is working in IE11.

    However, I receive the following error in IE11 when the <intersect> component would normally fire:

    [Vue warn]: Error in event handler for "enter": "ReferenceError: 'SVGGraphicsElement' is undefined"
    
    found in
    
    ---> <Intersect>
           <AppAbout> at src\components\About.vue
             <App> at src\App.vue
               <Root>
    

    This error is only present in IE11.

    Any clue as to what might be happening?

    opened by Splode 6
  • Nuxt: unexpected identifier

    Nuxt: unexpected identifier

    Screenshot 2020-06-30 at 14 43 45

    "vue-intersect": "^1.1.6", "nuxt": "^2.12.2",

    I tried adding doing

    build: {
        transpile: ['vue-intersect/dist/index'],
      },
    

    But it doesn't seem to do the trick

    opened by MartinMalinda 4
  • Syntax error when importing vue-intersect in jest

    Syntax error when importing vue-intersect in jest

    I'm getting an error anywhere I import vue-intersect:

     /project/node_modules/vue-intersect/dist/index.js:1
        import Vue from 'vue';
               ^^^
    
        SyntaxError: Unexpected identifier
    
    opened by MartinMalinda 3
  • Removed unnecessary array wrapping the entry argument of events

    Removed unnecessary array wrapping the entry argument of events

    Vue's $emit method is defined as vm.$emit( eventName, […args] ) which means that every argument of a custom event should be a separate argument of $emit.

    The extra array is unnecessary and forces me to unpack the first item to access the entry:

    <template>
      <!-- snip -->
        <intersect @enter="intersecting">
          <div>Hello world</div>
        </intersect>
      <!-- snip -->
    </template>
    
    <script>
    export default {
      // [snip]
      methods: {
        intersecting(extraArray) {
          const entry = extraArray[0]
          // ...
        }
    
        // alternative
        intersecting([entry]) {
          // ...
        }
      }
    }
    </script>
    opened by mtorromeo 3
  • Bump stringstream from 0.0.5 to 0.0.6

    Bump stringstream from 0.0.5 to 0.0.6

    Bumps stringstream from 0.0.5 to 0.0.6.

    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

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Bump eslint from 4.4.1 to 4.18.2

    Bump eslint from 4.4.1 to 4.18.2

    Bumps eslint from 4.4.1 to 4.18.2.

    Release notes

    Sourced from eslint's releases.

    v4.18.2

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    • 4f898c7 Build: Fix JSDoc syntax errors (#9813) (Matija Marohnić)
    • 13bcf3c Fix: Removing curly quotes in no-eq-null report message (#9852) (Kevin Partington)
    • b96fb31 Docs: configuration hierarchy for CLIEngine options (fixes #9526) (#9855) (PiIsFour)
    • 8ccbdda Docs: Clarify that -c configs merge with .eslintrc.* (fixes #9535) (#9847) (Kevin Partington)
    • 978574f Docs: Fix examples for no-useless-escape (#9853) (Toru Kobayashi)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v4.18.2 - March 2, 2018

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1 - February 20, 2018

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0 - February 16, 2018

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0 - February 2, 2018

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0 - January 19, 2018

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    ... (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

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Bump is-my-json-valid from 2.16.0 to 2.20.0

    Bump is-my-json-valid from 2.16.0 to 2.20.0

    Bumps is-my-json-valid from 2.16.0 to 2.20.0.

    Commits
    Maintainer changes

    This version was pushed to npm by linusu, a new releaser for is-my-json-valid 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

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • Bump sshpk from 1.13.1 to 1.16.1

    Bump sshpk from 1.13.1 to 1.16.1

    Bumps sshpk from 1.13.1 to 1.16.1.

    Release notes

    Sourced from sshpk's releases.

    v1.16.1

    • Fixes for #60 (correctly encoding certificates with expiry dates >=2050), #62 (accepting PKCS#8 EC private keys with missing public key parts)

    v1.16.0

    • Add support for SPKI fingerprints, PuTTY PPK format (public-key only for now), PKCS#8 PBKDF2 encrypted private keys
    • Fix for #48

    v1.15.2

    • New API for accessing x509 extensions in certificates
    • Fixes for #52, #50

    v1.14.1

    • Remove all remaining usage of jodid25519 (abandoned dep)
    • Add support for DNSSEC key format
    • Add support for Ed25519 keys in PEM format (according to draft-curdle-pkix)
    • Fixes for X.509 encoding issues (asn.1 NULLs in RSA certs, cert string type mangling)
    • Performance issues parsing long SSH public keys
    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

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 2
  • add destroy event and description

    add destroy event and description

    I ended up requiring a destroy event to tell when the underlying component the observer was observing had disappeared because no "leave" event was fired in that scenario.

    Example usage scenario:

    <div v-for="child in menuNodes" :key="child.key">
        <intersect
            @leave="hide(child.key, $event)"
            @enter="show(child.key, $event)"
            @destroyed="hide(child.key, $event)">
            <render-node :node="child" />
        </intersect>
    </div>
    

    Here I was wrapping each element from a list of slot contents with your component to be able to tell whether or not they had passed out of view, but the items on menuNodes list (of VNodes) are themselves dynamic meaning the list can change from the outside, which can cause the intersect component and associated contents to disappear without firing a "leave" event.

    Admittedly you can fix it this way too:

    import Intersect from "vue-intersect";
    
    const FixedIntersect = {
        ...Intersect,
        destroyed() {
            this.$emit("destroyed");
            Intersect.destroyed.call(this);
        }
    }
    
    opened by Nerdinacan 2
  • Trigger this automatically?

    Trigger this automatically?

    I have been looking for a component similar to this but being able to toggle a v-if automatically.

    Currently it looks like this component still requires you to manually act opon the @enter event or @leave event and perform the logic that you want to perform.

    <intersect @enter="msg = 'Intersected'" @leave="msg = 'Not intersected'">

    Is there a way to automically toggle a v-if on the slot content without having to add extra markup?

    not-assigned 
    opened by stephan-v 2
  • fixed: handle dynamically loaded components

    fixed: handle dynamically loaded components

    Fixes errors like: Argument 1 ('target') to IntersectionObserver.observe must be an instance of Element TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

    Occurs because vNode.isComment is true during loading of dynamic component (no observable element yet available, only displayName = #comment)

    opened by ulcuber 0
  • intersect with v-if not working properly

    intersect with v-if not working properly

    When I use <intersect v-if="activated == true" @enter=" addImages();" > <div class="h-1 w-full border"></div> </intersect>

    The intersect appears in the dom when the condition is met, but the intersect is not doing any method anymore when I scroll to it. If I remove the if then I have the problem that with a big screen when the page loads the intersect gets activated a couple of times while loading.

    How to make the intersect work with v-if? what is the reason that its not working?

    opened by dwagner320 0
  • Lazy load images

    Lazy load images

    We currently have this single image component:

    <template>
        <component v-bind:is="object.wrap" style="width: 100%; height: 100%;margin:0px;" class="image-wrapper">
        <div v-if="object.overlayColor" :style="{ backgroundColor: object.overlayColor }" class="image-overlay"></div>
            <a style="cursor:pointer;width:100%;height:100%;display:block;" v-if="object.linkToHome || object.href" @click="navigator">
                <img :src="src" :title="title" :alt="alt" :style="imageStyle"/>
            </a>
            <img v-else-if="src" :src="src" :title="title" :alt="alt" :style="imageStyle"/>
            <caption v-if="object.hasCaption" v-text="object.captionText" :style="object.captionStyleObject">Dit is een afbeelding</caption>
        </component>
    
    </template>
    <script>
        export default {
    
            data() {
                return {
                    imageStyle: {}
                }
            },
    
            props: ['object', 'property'],
    ...
          computed: {
                title() {
                    return this.object.title ? this.object.title : '';
                },
    
                alt() {
                    return this.object.alt ? this.object.alt : '';
                },
    
                src() {
                    return this.object.src ? this.object.src : '';
                }
    
            },
    ...
    

    How would you use Vue Intersect to Lazy load images in a component like this? Would we use @enter to load the image source? We would also need to attach the image source so not sure how to combine @entry with :src="src". Using @enter="src()" does not load any source data so does not work..

    N.B. Safari does support IntersectionObserver now https://caniuse.com/?search=IntersectionObserver

    opened by jasperf 0
  • `v-for` on `<intersect />` renders duplicate item to end of list if we unshift a new item.

    `v-for` on `` renders duplicate item to end of list if we unshift a new item.

    Hi there

    Thank you for this small, but useful Vue.js plugin.

    I have a rather peculiar problem, which I worked around eventually. Yet for the sake of documentation and helping others, it would be useful to note down this issue.

    Let's say I have an array items, of which I want to render each item in an <intersect> component. Such as:

    <intersect v-for="item in items" :key="item.id" @enter="someCallback">
        <p>{{ item.name }}</p>
    </intersect>
    

    Now assume I do unshift a new item with an unique id:

    this.items.unshift({
        id: 'randomId',
        name: 'foobar'
    })
    

    The new item won't be rendered at first position. Rather Vue.js will duplicate the last item and render it at the end of the list!

    From checking vue-intersect's source code I do not see, why this happens.

    As a workaround I encapsulated the <intersect> component:

    <div v-for="item in items" :key="item.id">
        <intersect @enter="someCallback">
            <p>{{ item.name }}</p>
        </intersect>
    </div>
    

    Maybe it has to do with how Vue.js handles abstract components, v-for, and :key together. Do you have an idea? Might this be an issue for Vue.js itself?

    Best regards Markus Wegmann Technokrat LLC

    not-assigned 
    opened by Atokulus 1
  • Some sort of property to destroy the observer.

    Some sort of property to destroy the observer.

    It would be useful if there was a way to destroy the observer created by the component when we're done with it. For example, if you're using the observer to load some content once its in view, there's no use the observer existing after that point, as the content is loaded now and nothing will happen if it leaves view and comes back. This could be implemented using a property or something - pass in a computed boolean and then watch it. If it changes to 'true' then destroy the observer, if it changes to 'false', maybe bring the observer back (not really as important).

    enhancement help wanted not-assigned 
    opened by megamidge 3
  • Lots of InteractionObservers

    Lots of InteractionObservers

    Hi!

    Was just wondering about this component, when used on page with lots of things to observe, like an image gallery of similar, it would create am InteractionObserver for each usage instead of reusing a single observer.

    Do you know if this would matter that much to performance or so ?

    Perhaps if the observer options are the same, it could reuse it for multiple elements ?

    help wanted not-assigned 
    opened by bobmoff 2
Releases(1.1.6)
Owner
WEAREHEAVY®
WEAREHEAVY® is a creative studio based on planet earth → We do work with companies and freelancers all over the world ☻
WEAREHEAVY®
Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

Vue 3 utility that enables you to track page scrolling progress.

Vinicius Kiatkoski Neves 20 Jun 24, 2022
A Vue.js directive to add a class to an based on vertical scroll

A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point

Jase Pellerin 6 Jan 8, 2020
Vue 3 Scroll Shadow - Add UX-friendly shadow to your scrollable list

Vue 3 Scroll Shadow Add UX-friendly shadow to your scrollable list Installation npm i vue3-scroll-shadow Usage import VueScrollShadow from 'vue3-scrol

null 0 Jun 30, 2021
↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.

Vue Scroll Animator ↕ A simple but fast & powerful library to animate HTML elements while scrolling pages. Installation npm install @byloth/vue-scroll

Matteo Bilotta 0 May 19, 2022
A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

null 0 May 10, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
vue-check-view - A plugin that checks if element is in viewport. Fast, small, has no dependencies, live demo.

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

Vasily Timofeev 115 Sep 14, 2022
A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

null 223 Sep 9, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

null 0 Nov 27, 2020
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

Ranlizzz 2 Nov 5, 2020
A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Carlos González 20 Sep 27, 2021
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 447 Sep 30, 2022
A plugin that checks if element is in viewport

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

Vasily Timofeev 115 Sep 14, 2022
A Vue.js component for detecting when components are visible in the viewport via the Vue.js scoped slots api.

vue-scrollview ScrollView is a Vue.js plugin that includes a set of components and methods for facilitating UI interactions tied to scrolling in your

Chris Hurlburt 115 Jun 28, 2022
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 117 Feb 23, 2022