!!! Please use native simplebar-vue library. This library is not maintained anymore.
For npm and pnpm:
(npm or pnpm) install simplebar simplebar-vue3
For yarn:
yarn add simplebar simplebar-vue3
You need to import simplebar stylesheet in your main.(js|ts) file for scrollbar to look normal and work.
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>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>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>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;
<SimpleBar>
<ChildComponent />
</SimpleBar><!-- 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>import { Options } from 'simplebar';
interface SimpleBarProps {
/**
* @default {'div'}
*/
tag?: string;
options?: Options;
}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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent