Vue.$sr returns $sr is undefined in browser

tserkov / vue-scroll-reveal

A Vue directive to wrap @jlmake's excellent ScrollReveal library.

MIT License

163 stars 17 forks source link

Vue.$sr returns $sr is undefined in browser #26

Closed MissakaI closed 5 years ago

MissakaI commented 5 years ago

As described in the readme I've installed and initiated vue-scroll-reveal as follows

import Vue from 'vue';
import VueScrollReveal from 'vue-scroll-reveal';
Vue.use(VueScrollReveal,{
  duration: 1500,
  delay: 50,
});

And I tried to execute

Vue.$sr.reveal(".bottomReveal", {
  origin: "bottom"
})
.reveal(".leftReveal", {
    origin: "left"
})
.reveal(".rightReveal", {
    origin: "right"
})
.reveal(".topReveal", {
    origin: "top"
});

But it in the browser it says TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default.$sr is undefined

What i have done wrong. How to use the exposed reveal function. I am using vue-scroll-reveal@1.0.11. I am new to both vue and vue-scroll-reveal

tserkov commented 5 years ago

What browser/version are you using?

MissakaI commented 5 years ago

This was in Firefox Developer Edition 67.0b10

Edge returns it as TypeError: Unable to get property 'reveal' of undefined or null reference

tserkov commented 5 years ago

I'm not able to replicate your issue -- would you be able to provide me with a minimal repo that reproduces your issue?

MissakaI commented 5 years ago

I've created a repo as requested. You can find it here.

tserkov commented 5 years ago

Move Vue.use(VueScrollReveal, ...) into main.js instead of views/Home.vue
vue-scroll-reveal is intended to be primarily used as a directive, not programmatically. For example, inside of components/page_components/home_page/timelineItem.vue:
```
<div
class="timeline-panel"
v-scroll-reveal.reset="{ origin: contentPosition }"
style="..."
>
```
When accessing $sr from within components (like within mounted()), try accessing it via this.$sr instead of Vue.$sr.

MissakaI commented 5 years ago

When accessing $sr from within components (like within mounted()), try accessing it via this.$sr instead of Vue.$sr.

They earlier reason I was unsuccessful with this keyword because I have been using the mounted hook incorrectly with the arrow expression ()=> where as it should be function(){} according to vue documentation.

But console.log(this.$sr) outputs the object with reveal function within yet when reveal is called as this.$sr.reveal() it returns TypeError: this.$sr.reveal(...) is undefined. I've included a possible workaround for this.

vue-scroll-reveal is intended to be primarily used as a directive, not programmatically. 
Noted. But I cannot convert the all of the components to use that use ScrollReveal to directive as there are quite a number of components that use these classes.

As my approach didn't work i tried as you mentioned using directive apporoach as well. But it didn't render any animations nor any errors.