Vue.$sr returns $sr is undefined in browser about vue-scroll-reveal

[tserkov]

What browser/version are you using?

[MissakaI]

This was in Firefox Developer Edition 67.0b10

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

[tserkov]

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

[MissakaI]

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

[tserkov]

• 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]

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.