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, Swiper.

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 from 'vitepress/theme'

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

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

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