Vue Laravel 8 Bootstrap 4 Owl Carousel Working Example

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Vue Laravel 8 Bootstrap 4 Owl Carousel Working Example.

Vue Laravel8 Owl Carousel

For Laravel 8 and Vue.js Lovers, please check below two links:

Friends now I proceed onwards and here is the code snippet for Vue Laravel 8 Bootstrap 4 Owl Carousel Working Example and please use this carefully to avoid the mistakes:

1. Now friends we need to add below code into our resources/js/components/ExampleComponent.vue file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                 <center><h2>Vue Laravel Bootstrap Owl Carousel Working Example:</h2></center>  
         <div id="demo" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item active">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Los Angeles" style="width:100%;">
            </div>

            <div class="carousel-item">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Chicago" style="width:100%;">
            </div>
          
            <div class="carousel-item">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="New york" style="width:100%;">
            </div>
          </div>

          <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
            </a>
          </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

2. Now friends we need to add below code into our resources/views/welcome.blade.php file to get the output on browser:

...
    <body>
       ...
        <!-- Below code will call the vue script -->
        <div id="app"><example-component></example-component></div>
        <script src="{{asset('js/app.js')}}"></script>
        
    </body>
...

3. Finally friends, we need to run below command into your terminal and you working example:

//In first terminal run
npm run watch

//In second terminal run
php artisan serve

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Guys in my next post, I will tell you, how to add images in fullcalendar events? And other demoes related to Vuejs Laravel.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post.Nothing matters if your views will good or bad.

Jassa

Thanks