Как использовать загрузочный swiper в vue js

#vuejs2

Вопрос:

Я попытался преобразовать шаблон начальной загрузки html в компоненты vue.Я включил все файлы js в основной js. Но функция swiper не работает . Swiper работает с jquery.

                   <!-- Swiper -->
                    <div class="swiper-container introslider text-white">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide px-3 py-4 ">
                                <div class="card bg-none border-0 mb-4">
                                    <div class="card-body p-5">
                                        <div class="row">
                                            <div class="mx-auto col-12 col-sm-8 col-md-6">
                                                <i class="material-icons icons icon-100 text-white bg-danger mb-4">room_service</i><br>
                                                <h4>Best Food Services</h4>
                                                <p>Traditional Indian Cuisine with home made taste and advanced quality</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

"use strict"

$(document).ready(function() {

    /* Swiper slider */

    var swiper = new Swiper('.introslider', {

        autoplay: true,

        pagination: {

            el: '.swiper-pagination',

        },

    });

});
 

main .js

 require(’./assets/vendor/cookie/jquery.cookie’);

require(’./assets/vendor/swiper/js/swiper.min’);

require(’./assets/vendor/masonry/masonry.pkgd.min’);

require(’./assets/js/main’);