# @splidejs/vue-splide

> The Splide component for Vue.

Latest version **0.6.12** (published 2022-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @splidejs/vue-splide
pnpm add @splidejs/vue-splide
yarn add @splidejs/vue-splide
bun add @splidejs/vue-splide
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.12 |
| Published | 2022-09-30 |
| First published | 2020-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 204.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 333 |
| Author | Naotoshi Fujita |
| Maintainers | splidejs |
| Keywords | splide, slider, carousel, slideshow, lightweight, touch, responsive, vue |

## Links

- npm: https://www.npmjs.com/package/@splidejs/vue-splide
- Repository: https://github.com/Splidejs/vue-splide
- Homepage: https://github.com/Splidejs/vue-splide#readme
- Issues: https://github.com/Splidejs/vue-splide/issues
- npm.io page: https://npm.io/package/@splidejs/vue-splide

## Dependencies (1)

- [@splidejs/splide](https://npm.io/package/@splidejs/splide.md) ^4.1.3

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.6.12 (latest) — 2022-09-30
- 0.6.11 — 2022-09-20
- 0.6.10 — 2022-09-06
- 0.6.9 — 2022-09-06
- 0.6.8 — 2022-09-04
- 0.6.7 — 2022-06-11
- 0.6.6 — 2022-05-28
- 0.6.5 — 2022-05-26
- 0.6.4 — 2022-05-14
- 0.6.3 — 2022-04-06
- 0.6.2 — 2022-04-05
- 0.6.1 — 2022-04-05
- 0.6.0 — 2022-04-05
- 0.5.18 — 2022-01-26
- 0.5.17 — 2022-01-19
- … 29 more at https://npm.io/package/@splidejs/vue-splide/versions

## README

<div align="center">
  <a href="https://splidejs.com" target="_blank">
      <img width="70" src="images/logo.svg">
  </a>
  <a href="https://v3.vuejs.org/" target="_blank">
      <img width="70" src="images/vue-logo.svg">
  </a>

  <h1>Vue Splide</h1>

  <p>
    Vue Splide is the Vue component for the
    <a href="https://github.com/Splidejs/splide">Splide</a> slider/carousel.
  </p>

  <p>
    <a href="https://splidejs.com/integration/vue-splide/">Getting Started</a>
    <br>
    <a href="https://splidejs.com/">Demo</a>
    <br>
    <a href="https://github.com/Splidejs/splide/discussions">Discussions</a>
  </p>
</div>

## Caveat

The latest version only supports **Vue 3**.
You have to use the old version (0.3.5) for Vue 2, but the Splide version is also outdated.


## Quick Start
Get the latest version from NPM:
```
$ npm install @splidejs/vue-splide
```

Import CSS and components:

```vue
<template>
  <Splide :options="{ rewind: true }" aria-label="Vue Splide Example">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue';
import '@splidejs/vue-splide/css';

export default defineComponent( {
  components: { Splide, SplideSlide },
} );
</script>
```

Visit [here](https://splidejs.com/integration/vue-splide/) for more details.


## Support Splide

Please support the project if you like it!
- [GitHub Sponsors](https://github.com/sponsors/NaotoshiFujita)


## License
Vue Splide and Splide are released under the MIT license.
© 2022 Naotoshi Fujita

---
_Source: https://npm.io/package/@splidejs/vue-splide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._