OverlayScrollbars/packages/overlayscrollbars-vue

Example   •   Documentation   •   FAQ

The official OverlayScrollbars wrapper for Vue3.

Installation

npm install overlayscrollbars-vue

Peer Dependencies

OverlayScrollbars for Vue has the following peer dependencies:

• The vanilla JavaScript library: overlayscrollbars

npm install overlayscrollbars

• The Vue framework: vue

npm install vue

TypeScript

• In case you are using TypeScript, you have to install the OverlayScrollbars typings:

npm install @types/overlayscrollbars

Since this wrapper is written in TypeScript it comes with its generated typings.
Check out the recommended tsconfig.json options.

Usage

CSS

You have to import the OverlayScrollbars.css by yourself.
The component doesn't do it for you as the styles are global styles!
There are different ways to achieve this, in Vue the most simple way for me was to add this line in the main file:

import "overlayscrollbars/css/OverlayScrollbars.css";

Import

With the app.component method you can register the wrapper globally:

import { createApp } from "vue";
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";

const app = createApp({});
app.component("OverlayScrollbars", OverlayScrollbarsComponent);

In case you wanna register the Component locally, you can simply import it and do whatever you want with it:

import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";

export default {
  name: "app",
  components: {
    OverlayScrollbars: OverlayScrollbarsComponent,
  },
};

Template

After the registration you can use it in templates like:

<!-- PascalCase -->
<OverlayScrollbars>example content</OverlayScrollbars>
<!-- kebab-case -->
<overlay-scrollbars>example content</overlay-scrollbars>

Properties

Two properties are accepted: options and extensions.

• The options property accepts a object and can be changed at any point in time, and the plugin will adapt.
• The extensions property accepts a string, string array or object and is only taken into account if the component gets mounted.

<OverlayScrollbars
  :options="{ scrollbars: { autoHide: 'scroll' } }"
  :extensions="['extensionA', 'extensionB']"
>
</OverlayScrollbars>

You can read more about the options object here, extensions are documented here and here.

Instance

If you get the component reference, it provides two methods: osInstance() and osTarget().

• The osInstance() method returns the OverlayScrollbars instance of the component, or null if the instance isn't initialized yet or already destroyed.
• The osTarget() method returns the native html element to which the plugin was initialized, or null if the the component isn't mounted yet or already unmounted.

Example App

In case you need a example app for reference, you can use the example app in this repo(example folder):

• Live example
• Source code

If you wanna build the example app, run these commands:

npm run setup
npm run build
npm run example

License

MIT