CODEWITHSUNDEEP
laravelnpm
loomy
loomy

Reputation: 190

Laravel 10 install swiper.js with npm and use it with vite

I want to use in my Laravel 10 installation with vite the package https://swiperjs.com/ so I've installed it: npm install swiper and now? I've tried to add import swiper from 'swiper' in my res/app.js file and @import in the res/app/app.css ran npm run build with no errors, but if I try to use it in my livewire blade file @section('scriptsafter') var swiper = new Swiper(".mySwiper", {}); @endsection I get the error that swiper is not defined. Can anyone here explain in simple words how to install and use a package in laravcel 10 if I want to install it with npm and use it in livewire << blade file or anywhere else in the page? Thank you!

Upvotes: 1

Views: 779

Answers (1)

rubendn
rubendn

Reputation: 205

I was encountering the same issue using Vite and Laravel but it worked after I added both of these lines to my app.js file.

import Swiper from 'swiper/bundle';
window.Swiper = Swiper;

and the following in the app.css file

@import 'swiper/css/bundle';

Upvotes: 0

Related Questions