https://github.com/theomessin/vue-chat-scroll

🖱️ Vue directive to keep things scrolled to the bottom.
https://github.com/theomessin/vue-chat-scroll

chat javascript scrolling vuejs vuejs2

Last synced: 26 days ago
JSON representation

🖱️ Vue directive to keep things scrolled to the bottom.

• Host: GitHub
• URL: https://github.com/theomessin/vue-chat-scroll
• Owner: theomessin
• License: mit
• Created: 2016-12-08T05:47:17.000Z (almost 8 years ago)
• Default Branch: alpha
• Last Pushed: 2023-03-04T10:53:47.000Z (over 1 year ago)
• Last Synced: 2024-09-28T17:41:51.944Z (about 1 month ago)
• Topics: chat, javascript, scrolling, vuejs, vuejs2
• Language: JavaScript
• Homepage: https://jsfiddle.net/theomessin/n7542hk1/
• Size: 473 KB
• Stars: 573
• Watchers: 7
• Forks: 76
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
## Installing

#### Using a package manager (recommended)

The recommended way of installing _vue-chat-scroll_ is using the [npm package](https://www.npmjs.com/package/vue-chat-scroll/v/alpha) with the npm (or yarn) package manager:

```bash

npm i vue-chat-scroll@alpha

```

After installing the package, you must use the _vue-chat-scroll_ [plugin](https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin) :

```js

import VueChatScroll from 'vue-chat-scroll';

Vue.use(VueChatScroll);

new Vue(...);

```

#### Using a script tag

If working on a proof of concept or a fiddle, it can be easier to use a script tag. We recommend using a CDN such as unpkg or jsdelvr.

```html

```

_vue-chat-scroll_ will attempt to auto-register itself with Vue. This should work as long as `window.Vue` is defined.

## Usage

We aim to make using _vue-chat-scroll_ as straightforward as possible. Simply using the `v-chat-scroll` directive should take care of most use cases.

```html



  ...



```


You may configure the directive by passing an object as well. For example, the `enable` configuration flag:

```html



  ...



```


Please refer to the `Config` interface and `defaultConfig` object in [config.ts](src/config.ts) to find out more about what can be configured, as well as what the default configuration values are.

## Examples

🧸 Bear with us, all of this is work in progress. We'll be adding some examples of how this plugin can be used to build a fully-featured chat (such as Slack's one), or even a console looking log viewer.