Demo Request

[asg5704-deprecated]

Can you provide a demo of the setup with Nuxt.js. I tried adding it to a previous project and the element will not reveal itself (it is there but the opacity is 0) when I add the v-scroll-reveal like so <section id="facts" v-scroll-reveal>...</section>. Am I missing something?

plugins/vue-scroll-reveal.js:

import Vue from 'vue';
import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal, {
  reset: true,
  class: 'v-scroll-reveal',
  duration: 500,
  distance: '10px',
  mobile: true
});

nuxt.config.js:

plugins: [
  { src: "~/plugins/vue-scroll-reveal", ssr: false }
],
build: {
  build: ['vue-scroll-reveal']
}

[tserkov]

Everything looks fine there, but unfortunately I don't use Nuxt.js myself, that was a contribution by @JGJP, so I don't even know where to begin.

If you're able to provide a minimal repo demonstrating your issue with how you're expecting to use Nuxt + this library, I'd be more than happy to debug from there.

[JGJP]

build: {
  build: ['vue-scroll-reveal']
}

@asg5704 This part is not necessary, otherwise I see nothing wrong with your usage. Try removing the object argument for Vue.use()

[asg5704-deprecated]

@tserkov @JGJP I tried replicating the code in another Nuxt project and it worked perfectly. So it seems that it IS working, just not in my current Nuxt project. I have already updated Nuxt, ran npm audit fix I will have to do some digging in the current Nuxt project to find the issue as it must be on my end. I'll keep you updated.

[JGJP]

Good to hear that you got somewhere with this. As for this project, it may be worth looking at your CSS, try it on some brand new element that has absolutely no styles applied to it

[devpaps]

I got the similar setup, but my elements that i put the class of v-scroll-reveal, it wont affect them at all. I've tried to delete all of the object argument forVue.use(), but with out luck.

[JGJP]

@devpaps v-scroll-reveal is not a class that you need to assign, please double check that your usage in the html matches the examples in the README

[devpaps]

@JGJP Oh my lord, i did like this.. <div class="left v-scroll-reveal.reset"></div> when it should be <div v-scroll-reveal.reset class="left"></div> Thanks for the heads up! :)