{"id":13810063,"url":"https://github.com/theomessin/vue-chat-scroll","last_synced_at":"2025-05-16T08:03:59.065Z","repository":{"id":40295762,"uuid":"75907199","full_name":"theomessin/vue-chat-scroll","owner":"theomessin","description":"🖱️ Vue directive to keep things scrolled to the bottom.","archived":false,"fork":false,"pushed_at":"2023-03-04T10:53:47.000Z","size":484,"stargazers_count":571,"open_issues_count":30,"forks_count":75,"subscribers_count":7,"default_branch":"alpha","last_synced_at":"2025-04-08T18:19:14.433Z","etag":null,"topics":["chat","javascript","scrolling","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://jsfiddle.net/theomessin/n7542hk1/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theomessin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-08T05:47:17.000Z","updated_at":"2025-03-21T23:50:17.000Z","dependencies_parsed_at":"2024-01-08T08:56:10.032Z","dependency_job_id":null,"html_url":"https://github.com/theomessin/vue-chat-scroll","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"8a68a271fecaffad43d25300ca192e0ada88100b"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theomessin%2Fvue-chat-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theomessin%2Fvue-chat-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theomessin%2Fvue-chat-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theomessin%2Fvue-chat-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theomessin","download_url":"https://codeload.github.com/theomessin/vue-chat-scroll/tar.gz/refs/heads/alpha","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493380,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","javascript","scrolling","vuejs","vuejs2"],"created_at":"2024-08-04T02:00:44.760Z","updated_at":"2025-05-16T08:03:54.039Z","avatar_url":"https://github.com/theomessin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","滚动","UI Utilities","Scroll"],"readme":"## Installing\n\n#### Using a package manager (recommended)\n\nThe 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:\n\n```bash\nnpm i vue-chat-scroll@alpha\n```\n\nAfter installing the package, you must use the _vue-chat-scroll_ [plugin](https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin) :\n\n```js\n\nimport VueChatScroll from 'vue-chat-scroll';\n\nVue.use(VueChatScroll);\n\nnew Vue(...);\n```\n\n#### Using a script tag\n\nIf 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.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-chat-scroll@alpha/dist/vue-chat-scroll.js\"\u003e\u003c/script\u003e\n```\n\n_vue-chat-scroll_ will attempt to auto-register itself with Vue. This should work as long as `window.Vue` is defined.\n\n## Usage\n\nWe 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.\n\n```html\n\u003cdiv v-chat-scroll\u003e\n  ...\n\u003c/div\u003e\n```\n\nYou may configure the directive by passing an object as well. For example, the `enable` configuration flag:\n\n```html\n\u003cdiv v-chat-scroll=\"{ enable: false }\"\u003e\n  ...\n\u003c/div\u003e\n```\n\nPlease 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.\n\n## Examples\n\n🧸 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheomessin%2Fvue-chat-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheomessin%2Fvue-chat-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheomessin%2Fvue-chat-scroll/lists"}