# simplebar-vue

> Vue component for SimpleBar

Latest version **2.4.2** (published 2025-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install simplebar-vue
pnpm add simplebar-vue
yarn add simplebar-vue
bun add simplebar-vue
```

## Health

**Score 50/100 (C)** — status: stable.

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

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.4.2 |
| Published | 2025-07-03 |
| First published | 2018-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 93.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6416 |
| Author | Piers Olenski |
| Maintainers | gromy |

## Links

- npm: https://www.npmjs.com/package/simplebar-vue
- Repository: https://github.com/grsmto/simplebar
- Homepage: https://grsmto.github.io/simplebar/
- Issues: https://github.com/grsmto/simplebar/issues
- npm.io page: https://npm.io/package/simplebar-vue

## Dependencies (2)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.13.11
- [simplebar-core](https://npm.io/package/simplebar-core.md) ^1.3.2

## Recent versions

- 2.4.2 (latest) — 2025-07-03
- 2.0.0-beta.12 (beta) — 2023-01-14
- 1.3.3-corejs2-1 (corejs2) — 2019-10-23
- 2.4.1 — 2025-05-10
- 2.4.0 — 2024-12-10
- 2.3.5 — 2024-06-13
- 2.3.4 — 2024-05-05
- 2.3.3 — 2023-04-15
- 2.3.2 — 2023-03-29
- 2.3.1 — 2023-03-19
- 2.3.0 — 2023-02-11
- 2.2.0 — 2023-01-19
- 2.1.1 — 2023-01-18
- 2.1.0 — 2023-01-16
- 2.0.0 — 2023-01-15
- … 68 more at https://npm.io/package/simplebar-vue/versions

## README

<p align="center">
  <img src="https://user-images.githubusercontent.com/527559/66231995-3cd0c380-e6be-11e9-8782-c50c834aac93.png" width="570" alt="SimpleBar" />
</p>
<br/>
<p align="center" style="margin: 40px;">
  <a href="https://npmjs.org/package/simplebar-vue"><img alt="NPM version" src="https://img.shields.io/npm/v/simplebar-vue.svg?style=flat-square" /></a>
  <a href="https://npmjs.org/package/simplebar-vue"><img alt="NPM downloads" src="https://img.shields.io/npm/dm/simplebar-vue.svg?style=flat-square"></a>
  <a href="https://travis-ci.org/grsmto/simplebar"><img alt="Build Status" src="https://img.shields.io/travis/grsmto/simplebar/master.svg?style=flat-square" /></a>
  <a href="https://automate.browserstack.com/public-build/amtTU2pEa1FjNmpabTBCbUh2b3FpbFZQaXhNd1Q3bEg0L1dlSzd2SGN2Zz0tLWpjK1ZwWWRNWnVGQWI4OXphWGRISEE9PQ==--39b14340be576db5bd01b020627cd17414003bfb%"><img src='https://automate.browserstack.com/badge.svg?badge_key=amtTU2pEa1FjNmpabTBCbUh2b3FpbFZQaXhNd1Q3bEg0L1dlSzd2SGN2Zz0tLWpjK1ZwWWRNWnVGQWI4OXphWGRISEE9PQ==--39b14340be576db5bd01b020627cd17414003bfb%'/></a>
</p>
<br/>

# SimplebarVue

- **🐦 Follow me on [Twitter!](https://twitter.com/adriendenat) or [Mastodon!](https://mas.to/@adrien)**
- **👨‍💻 I'm available for hire! [Reach out to me!](https://adriendenat.com/)**
- **🚧 Check out my new project [Scroll Snap Carousel](https://github.com/Grsmto/scroll-snap-carousel)!**

### Installation

**- Via npm**
`npm install simplebar-vue --save`

**- Via Yarn**
`yarn add simplebar-vue`

### Usage

Check out the [Demo project(vue2)](https://github.com/Grsmto/simplebar/blob/master/examples/vue-2.7/src/App.vue) and the [Demo project(vue3)](https://github.com/Grsmto/simplebar/blob/master/examples/vue-3/src/App.vue)

First, register it in your Vue app:

```js
import simplebar from 'simplebar-vue';
import 'simplebar-vue/dist/simplebar.min.css';

export default {
  components: {
    simplebar,
  },
};
```

Then you can use it in your template

```js
<template>
  <simplebar data-simplebar-auto-hide="false">
    // your content elements
  </simplebar>
</template>
```

**Don't forget to import both css and js in your project!**

### :warning: Warning!

SimpleBar is **not intended to be used on the `body` element!** I don't recommend wrapping your entire web page inside a custom scroll as it will often badly affect the user experience (slower scroll performance compared to the native body scroll, no native scroll behaviours like click on track, etc.). Do it at your own risk! SimpleBar is meant to improve the experience of **internal web page scrolling**; such as a chat box or a small scrolling area. **Please read the [caveats](#5-caveats) section first to be aware of the limitations!**

### Options

Find the list of available options on [the core documentation](https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/README.md#options).

### Troubleshooting

If you are experiencing issues when setting up SimpleBar, it is most likely because your styles are clashing with SimpleBar ones. Make sure the element you are setting SimpleBar on does not override any SimpleBar css properties! **We recommend to not style that element at all and use an inner element instead.**

### Sponsors

Thanks to BrowserStack for sponsoring open source projects and letting us test SimpleBar for free.
<a href="https://www.browserstack.com" target="_blank">
<img src="https://user-images.githubusercontent.com/15015324/45184727-368fbf80-b1fe-11e8-8827-08dbc80b0fb1.png" width="200">
</a>

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