[Vue warn]: Failed to resolve directive: waypoint

[juliewongbandue]

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]

I might be wrong since I never installed a plugin directly into a single file component but I think you misunderstood how plugins should be initialized.

Plugins should be "installed" before the master vue's init. You will find this in the main.js file (new Vue({.. line).

So, try to move Vue.use(VueWaypoint) into main.js before that line.
This rule is valid for every plugin you want to install.

[juliewongbandue]

Thanks for getting back to me!

So I have moved Vue.use(VueWaypoint) into my main.js file and am still getting the same error. I see Vue.use(Router) in the the index.js file in the router directory here. Perhaps it has something to do with how vue-router is used?:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

and here's my main.js file

import Vue from 'vue'
import App from './App'
import router from './router'
import Child from '@/components/child'
import VueWaypoint from 'vue-waypoint'

// Waypoint plugin
Vue.use(VueWaypoint)
Vue.config.productionTip = false

Vue.component('child', Child)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Additionally, I have Greensock installed and I have imported it in one component and am able to use it. I have a pretty bare bones setup for this test, and I'm really not sure what I'm doing wrong with your plugin. Here is my component where I use Greensock:

<template>
  <div class="child">
    <div class="animated">Animated div</div>
  </div>
</template>

<script>

import {TweenMax} from 'gsap'

export default {
  data: () => ({
    someData: 'string'
   }),
  mounted () {
    const animateDiv = document.querySelector('.animated')
    animateDiv.setAttribute('style', 'height: 100px; width: 100px; background-color: blue; position: relative; margin: auto; align-content: center; border-radius: 50px')

    TweenMax.to(animateDiv, 2, {left:500, rotation:50, yoyo: true, repeat:-1})
  }
}
</script>

Thanks again for your help! Would love to figure this out, it seems like a really useful plugin.

[scaccogatto]

I think the problem is here: Vue.component('child', Child)

Can you try the directive inside App.vue?

[nobodyiscertain]

I'm having this same issue. I've tried it in both the main entry point file and in the component I'm trying to use the directive in.

[colloquet]

I also had the same issue, it worked after I changed from

import VueWaypoint from 'vue-waypoint'

to

import VueWaypoint from 'vue-waypoint/src'

[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 (b591d0c).
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.

[juliewongbandue]

Got it!! Thanks so much @scaccogatto. Super helpful.

[colloquet]

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