Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, How to add wowjs in vue laravel 7 application?
For Laravel 7 and Vue.js Lovers, please check below two links:
Friends now I proceed onwards and here is the working code snippet for How to add wowjs in vue laravel 7 application? and please use this code snippet carefully to avoid the mistakes:
1. Firslty friends we need to run below commands into our laravel project terminal to get wowjs modules into our vue laravel application:
npm install --save wowjs
Â
2. Now friends we need to add below code into our resources/js/components/ExampleComponent.vue file:
<template>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 wow bounceInDown center" data-wow-delay="0.5s">
<p class="circle bg-yellow">very ES </p>
</div>
<div class="col-sm-4">
<img class="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />
</div>
<div class="col-sm-4 wow bounceInDown center" data-wow-delay="0.5s">
<p class="circle bg-yellow">very ES </p>
</div>
<div class="col-sm-4 wow bounceInUp center" data-wow-delay="0.5s">
<p class="circle bg-green">3 KiB only </p>
</div>
<div class="col-sm-4">
<img class="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />
</div>
<div class="col-sm-4 wow bounceInUp center" data-wow-delay="0.5s">
<p class="circle bg-green">3 KiB only </p>
</div>
<div class="col-sm-4 wow bounceInRight" data-wow-delay="0.5s">
<p class="circle bg-red">so impress</p>
</div>
<div class="col-sm-4">
<img class="wow fadeInDown img-thumbnail" data-wow-delay="0.5s" src="https://wowjs.uk/img/wow-logo.jpg" />
</div>
<div class="col-sm-4 wow bounceInRight" data-wow-delay="0.5s">
<p class="circle bg-red">so impress</p>
</div>
</div>
</div>
</template>
<script>
import WOW from 'wowjs';
export default {
mounted() {
new WOW.WOW({
live: false
}).init();
console.log('Component mounted.')
}
}
</script>
Â
3. Now friends we need to add below code into our resources/views/welcome.blade.php file to get the output on browser:
Guys, I have added bootstrap 4 cdn, animate css(for wowjs) and some custom styling to make full calendar looks good
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
</head>
<body>
<!-- Below code will call the vue script -->
<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Â
Â
4. Finally friends, we need to run below command into your terminal and you will see working full calendar example:
//In first terminal run npm run watch //In second terminal run php artisan serve
Â
Great, now we are done friends and if you have any kind of queries, suggestions, requirements then feel free to comment below.
Guys in my next post, I will tell you, how to add images in full calendar events?
Note: Friends, I just tell the basic setup and things but you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you share your views for this post. Nothing matters if your views are good or bad.
Jassa
Thanks
