Wowjs and Animate.css is not working with VUEJS

Question

I am trying to include some animation using either wowjs or animate.css but it doesnt seem to work. Here are the steps that I took.

1st:

npm install wowjs

in main.js

import 'animate.css';

In pages that I would want to use animate

<b-container id = "container">
    <b-row style = "margin-top: 100px;" class = "animated fadeInUp">
    ....
    </b-row>
<b-container>

In pages that I would want to use wowjs

<template>
    <b-container id = "container">
        <b-row style = "margin-top: 100px;" class = "wow fadeInUp">
            ....
        </b-row>
    <b-container>
<template>

<script>
    import {WOW} from 'wowjs';
    export default {
        mounted() {
            new WOW().init();
        },

    }
</script>

Is there anything wrong that i did here? no animation is showing up at all. Appreciate any help!

Answer 1

For the vue you need to have the latest vue-cli (4.5.12) and animate.css (4.1.1) versions for it to work.

Probably you may want to import them directly and load them through a CDN.

For wowjs try, (npm install wow.js) instead. You can check the references here:

https://github.com/animate-css/animate.css/issues/993

https://github.com/matthieua/WOW/issues/252