Vue Splide is the Splide component for Vue

Vue Splide

Vue Splide is the Splide component for Vue.


Get the latest version by NPM:

$ npm install @splidejs/vue-splide


Global Registration

Import vue-splide and install into Vue:

import Vue from 'vue';
import App from './App';
import VueSplide from '@splidejs/vue-splide';

Vue.use( VueSplide );

new Vue( {
  el    : '#app',
  render: h => h( App ),
} );

Local Registration

Import Splide and SplideSlide components:

import { Splide, SplideSlide } from '@splidejs/vue-splide';

export default {
  components: {


Import styles if you need.

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

Options and Props

The Splide component accepts options as an object:

<splide :options="yourOptions"></splide>

Also, you can pass extensions or transition as props.


See this document for more details.

Listening to Events

You can listen to all Splide events through the Splide component. The callback function name is generated by the original event name, adding a “splide:” prefix. For example, “arrow:mounted” will be “splide:arrow:mounted”.

<splide @splide:arrow:mounted="onArrowMounted"></splide>

Note that the first argument is the splide instance, meaning original arguments are shifted by one.


Here is a small example:

  <splide :options="options">
      <img src="image1.jpg">
      <img src="image2.jpg">
      <img src="image3.jpg">

  export default { 
    data() {
      return {
        options: {
          rewind : true,
          width  : 800,
          gap    : '1rem',

More examples:

Download Details:

Author: Splidejs

Source Code:

#vue #vuejs #javascript

Vue Splide is the Splide component for Vue
26.65 GEEK