!!! Please use native simplebar-vue library. This library is not maintained anymore.

A Vue3 Wrapper for SimpleBar

Intallation

For npm and pnpm:

(npm or pnpm) install simplebar simplebar-vue3

For yarn:

yarn add simplebar simplebar-vue3

Usage

You need to import simplebar stylesheet in your main.(js|ts) file for scrollbar to look normal and work.

main.(js|ts)

import 'simplebar/dist/simplebar.min.css';

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

To use it in .vue files just import the component and use.

<template>
   <SimpleBar style="height: 500px; overflow-y: auto"> ... Content Goes here </SimpleBar>
</template>

<script setup>
   import { SimpleBar } from 'simplebar-vue3';
</script>
<!-- FOR NORMAL SCRIPT -->
<script>
   import { SimpleBar } from 'simplebar-vue3';
   import { defineComponent } from 'vue';

   export default defineComponent({
      components: { SimpleBar }
   });
</script>

Accessing Simplebar Instance

Via event;

If you want to access simplebar instance by event you can use @created event.

<template>
   <SimpleBar
      @created="instance => {
         simplebarInstance = instance;
      }"
   >
   </SimpleBar>
</template>

<!-- Typescript is optional -->
<script setup lang="ts">
   import type { SimplebarInstanceRef } from 'simplebar-vue3';
   import { SimpleBar } from 'simplebar-vue3';
   import { ref } from 'vue';

   const simplebarInstance = ref<SimplebarInstanceRef>(null);
</script>

Via template ref;

You access simplebar instance ref

<template>
   <SimpleBar ref="simplebarInstance"> </SimpleBar>
   <!-- Or this behavior can be used but it will give type error probably -->
   <SimpleBar :ref="(instance) => { simplebarInstance = instance }"> </SimpleBar>
</template>

<!-- Typescript is optional -->
<script setup lang="ts">
   import type { SimplebarInstanceRef } from 'simplebar-vue3';
   import { SimpleBar } from 'simplebar-vue3';
   import { ref } from 'vue';

   const simplebarInstance = ref<SimplebarInstanceRef>(null);
</script>

Via composable;

In CHILD COMPONENTS you can use useSimplebar composable to access simplebar instance as a Ref. NOTE: If you try access to instance before parent mounted this composable will return null;

parent.vue

<SimpleBar>
   <ChildComponent />
</SimpleBar>

child.vue

<!-- Typescript is optional -->
<script lang="ts">
   import { useSimplebar } from 'simplebar-vue3';
   import { onMounted } from 'vue';

   const simplebar = useSimplebar();
   onMounted(() => {
      simplebar.value.recalculate();
      simplebar.value.el.getBoundingClientRect();
      // or more
   });
</script>

Props

import { Options } from 'simplebar';

interface SimpleBarProps {
   /**
    * @default {'div'}
    */
   tag?: string;
   options?: Options;
}

TypeScript Support

This package has built-in typescript support for events and props it should work with .tsx files with no trouble.

To have types support in vue files we recommend you to use Volar plugin. Volar TypeScript Vue Plugin