How to add scroll reveal in vue3

Question

Could someone advise me to use like scroll reveal for vue3, I couldn't find any forum and if so please explain to me exactly how to import scroll reveal for vue3

I've already tried different libraries, but all are for vue3, and the transition belonging to vue3 wouldn't work very well as scrollreveal enter image description here

Answer 1

The Vue 3 branch for vue-scroll-reveal is not released on NPM, but you can add the library as a dependency using the project's github's URL. You will need to install it together with the dependency "scrollreveal" with yarn or npm like so:

yarn add scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2

or

npm i scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2

The Github README also describes how to use the library in a component which I've pasted below:

If using default options

<script setup>
import { vScrollReveal } from 'vue-scroll-reveal';
</script>

OR if using custom default options

<script setup>
import { createScrollRevealDirective } from 'vue-scroll-reveal'; 
const vScrollReveal = createScrollRevealDirective({
    delay: 1000,
    duration: 150,
});
</script>