[Vue warn]: Failed to resolve directive: waypoint

Hi there,

I’m fairly new to vue.js and am just trying to see if I can use this for a project that requires some animation on scroll. The vue.js CLI was used to scaffold the project. I simply included the sample code you have in your readme, but keep getting a [Vue warn]: Failed to resolve directive: waypoint in the console. Here’s my component:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div v-waypoint="{ active: true, callback: onWaypoint, options: intersectionOptions }"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueWaypoint from 'vue-waypoint'

// Waypoint plugin
Vue.use(VueWaypoint)

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      intersectionOptions: {
        root: null,
        rootMargin: '0px 0px 0px 0px',
        thresholds: [0]
      } // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
    }
  },
  methods: {
    onWaypoint ({ going, direction }) {
      // going: in, out
      // direction: top, right, bottom, left
      if (going === this.$waypointMap.GOING_IN) {
        console.log('waypoint going in!')
      }

      if (direction === this.$waypointMap.DIRECTION_TOP) {
        console.log('waypoint going top!')
      }
    }
  }
}
</script>

I may just be using Vue.use() incorrectly? Please let me know if you have any tips!

[scaccogatto]

@colloquet reply just found the problem. The library is not correctly exported as library by the webpack configuration.

I just pushed the related hotfix (b591d0cfd7204b7536d17772eac5e21f510396c8). Please run and update and change your code from:

import VueWaypoint from 'vue-waypoint'/src

to

import VueWaypoint from 'vue-waypoint'

This will work and it’s tested.

Beside that @juliewongbandue, I would suggest you not to use document.querySelector or any DOM reference inside Vue’s lifecycle methods: they are not always reliable. You can find a cleaner way by using directives.

Thanks for this, I will keep this open for two days if something is missing.

[colloquet]

@scaccogatto I see, thanks again for your work on this library.