"Failed to resolve directive" error

[Josh865]

I'm receiving a "Failed to resolve directive: observe-visibility" error in my application using the latest version of the package (0.4.3) along with Vue 2.5.17.

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

Vue.use(VueObserveVisibility);

export default {
    ...
}

The element on which I'm using the directive is

<div v-observe-visibility="titleVisibilityChanged">
    {{ title }}
</div>

Any ideas about what I may be doing incorrectly?

Thanks,
Josh

[antoined73]

I experience the same issue and I don't know why :/

[countnazgul]

I've managed to overcome this by importing the directive inside the component instead of making it global.

So ive removed it from main.js

// removed this from main.js
import VueObserveVisibility from 'vue-observe-visibility';
Vue.use(VueObserveVisibility);

And inside my component:

<script>
import { ObserveVisibility } from "vue-observe-visibility";
...
export default {
  name: "MyComponent", 
  directives: {
    ObserveVisibility
  },
  data() {
...

and then inside the same component use it as normal:

<div v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, 'onVisible')"></div>

[robinsout]

Thank you, working like a charm!