# Vue Splide
**Vue Splide is the [Splide](https://github.com/Splidejs/splide) component for [Vue](https://vuejs.org/).**
* [Document](https://splidejs.com/integration-vue-splide/)
* [Splide Demos](https://splidejs.com/)
* [Working Examples](https://splidejs.github.io/vue-splide/)
## Installation
Get the latest version by NPM:
```bash
$ npm install @splidejs/vue-splide
```
## Registration
### Global Registration
Import `vue-splide` and install into Vue:
```javascript
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:
```javascript
import { Splide, SplideSlide } from '@splidejs/vue-splide';
export default {
components: {
Splide,
SplideSlide,
},
}
```
### CSS
Import [styles](https://splidejs.com/themes/) if you need.
```javascript
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](https://splidejs.com/options/) as an object:
```javascript
```
Also, you can pass extensions or transition as props.
```javascript
```
See this [document](https://splidejs.com/integration-vue-splide) for more details.
## Listening to Events
You can listen to all [Splide events](https://splidejs.com/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".
```javascript
```
Note that the first argument is the splide instance, meaning original arguments are shifted by one.
## Examples
Here is a small example:
```javascript
```
More examples:
* [Basic example](https://github.com/Splidejs/vue-splide/blob/master/examples/src/js/examples/components/BasicExample.vue)
* [Autoplay](https://github.com/Splidejs/vue-splide/blob/master/examples/src/js/examples/components/AutoplayExample.vue)
* [Thumbnails](https://github.com/Splidejs/vue-splide/blob/master/examples/src/js/examples/components/ThumbnailsExample.vue)
* [Dynamic slides](https://github.com/Splidejs/vue-splide/blob/master/examples/src/js/examples/components/DynamicSlidesExample.vue)
* [Videos](https://github.com/Splidejs/vue-splide/blob/master/examples/src/js/examples/components/VideoExample.vue)
## License
Vue Splide and Splide are released under the MIT license.
© 2020 Naotoshi Fujita