There are few options on how to include/import Swiper into your project:
We can install Swiper from NPM
npm install swiper
import CSS in the src/main.ts
file
import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css';
Below the example how to use the package and make it working swiper on any page.
vue tempalte
<template> <swiper :slides-per-view="3" :space-between="50" :navigation="navigation" :modules="modules" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> ... </swiper> </template>
JavaScript
<script setup lang="ts"> import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css'; import 'swiper/css/navigation'; import { Navigation, Autoplay } from 'swiper/modules'; const modules = [Navigation, Autoplay] </script >
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© 2025 Domiex Created & Crafted by SRBThemes.