Use from Source

You can easily add the source file to your project for full control over the template.

❗ IMPORTANT

This method is manual and does not provide updates or support.

Download or copy the VPSwiper.vue file to your project.

• Source File: VPSwiper.vue
• Target Location: .vitepress/theme/components/VPSwiper.vue

Install the dependency, SwiperJS.

npm

npm i swiper

pnpm

pnpm i swiper

yarn

yarn add swiper

bun

bun i swiper

Add these 2 lines to your index.[js,ts].

.vitepress/theme/index.js

import DefaultTheme, { VPBadge } from 'vitepress/theme'

import VPSwiper from './components/VPSwiper.vue'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) 
    app.component('VPSwiper', VPSwiper) 
  },
}

VPBadge Only required if you are using the VitePress Badge.

See the Usage Guide for instructions on adding the <VPSwiper> tag.