{"id":18674030,"url":"https://github.com/jmaczan/basic-vue-chat","last_synced_at":"2025-08-21T02:31:22.815Z","repository":{"id":58887769,"uuid":"152887077","full_name":"jmaczan/basic-vue-chat","owner":"jmaczan","description":"💬 Easy to use Vue chat","archived":false,"fork":false,"pushed_at":"2023-08-16T12:38:44.000Z","size":516,"stargazers_count":76,"open_issues_count":0,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-16T22:37:09.280Z","etag":null,"topics":["chat","chat-application","chatroom","vue","vuejs","vuejs2","vuex"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/basic-vue-chat","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmaczan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-10-13T15:41:57.000Z","updated_at":"2024-12-13T20:26:19.000Z","dependencies_parsed_at":"2024-04-13T01:58:19.443Z","dependency_job_id":"80d4debd-d5d6-4505-aabb-4e2df9528bb8","html_url":"https://github.com/jmaczan/basic-vue-chat","commit_stats":{"total_commits":48,"total_committers":4,"mean_commits":12.0,"dds":0.0625,"last_synced_commit":"082c5805f8c4704b0effcd06cd68dec521845594"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmaczan%2Fbasic-vue-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmaczan%2Fbasic-vue-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmaczan%2Fbasic-vue-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmaczan%2Fbasic-vue-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmaczan","download_url":"https://codeload.github.com/jmaczan/basic-vue-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230479864,"owners_count":18232630,"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","chat-application","chatroom","vue","vuejs","vuejs2","vuex"],"created_at":"2024-11-07T09:17:17.178Z","updated_at":"2024-12-19T18:15:24.712Z","avatar_url":"https://github.com/jmaczan.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Miscellaneous"],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"150\" src=\"basic-vue-chat.png\" alt=\"basic-vue-chat logo\"\u003e\u003c/p\u003e\n\n# basic-vue-chat\n\n[![Version](https://img.shields.io/npm/v/basic-vue-chat.svg)](https://www.npmjs.com/package/basic-vue-chat)\n\n\u003cimg src=\"https://raw.githubusercontent.com/jmaczan/basic-vue-chat/master/preview.png\" width=\"506\" height=\"406\" class=\"center\"\u003e\n\nImplementation of Vue-based chat.\n\n- [basic-vue-chat](#basic-vue-chat)\n  * [Installation](#installation)\n    + [npm](#npm)\n    + [yarn](#yarn)\n    + [using repository](#using-repository)\n  * [Dependencies](#dependencies)\n  * [Usage](#usage)\n    + [Pushing messages](#pushing-messages)\n    + [Handling messages from user](#handling-messages-from-user)\n    + [Images](#images)\n    + [Commands](#commands)\n    + [Mock data](#mock-data)\n  * [Customization](#customization)\n    + [Styles](#styles)\n    + [Title](#title)\n    + [Initial data](#initial-data)\n    + [Styling](#styling)\n  * [Code structure](#code-structure)\n  * [Technologies used](#technologies-used)\n\n## Installation\n\nYou can install the component using package managers, such as npm or yarn or install component from the repository.\n\n### npm\n```bash\nnpm i basic-vue-chat\n```\n\n### yarn\n```bash\nyarn add basic-vue-chat\n```\n\n### using repository\n```bash\ngit clone https://github.com/jmaczan/basic-vue-chat.git\ncd basic-vue-chat\nnpm i\n```\n\n## Dependencies\n\nComponents uses Vue (`vue` package), Fontawesome and Moment.js for Vue (`vue-moment`).\n\n## Usage\n\nChat is a single Vue component, which you can find in `/src/components/basic-vue-chat/`. To start, just import BasicVueChat component and put the following line into your html code:\n```html\n\u003cbasic-vue-chat /\u003e\n```\n\n### Pushing messages\n\nTo push message to chat, just **pass newMessage prop to BasicVueChat**. Example:\n```html\n\u003cbasic-vue-chat :new-message=\"message\" /\u003e\n```\n\nThe `message` object above may be part of `data` in your Vue component in which you will use BasicVueChat.\n\nExample of correct message structure:\n```javascript\n{\n  id: 0,\n  author: 'Person',\n  imageUrl: 'http://path/to/image',\n  image: '',\n  contents: 'hi there',\n  date: '16:30'\n}\n```\n\nYou can find example of message pushing in `App.vue` file.\n\n### Handling messages from user\n\nWhen user sends message, **the message is propagated to BasicVueChat component** and **event newOwnMessage is emitted**.  To handle this event, you can for example do this:\n```html\n\u003cbasic-vue-chat @newOwnMessage=\"onNewOwnMessage\" /\u003e\n```\nwhere `onNewOwnMessage(message)` is a method in your Vue component in which you will use BasicVueChat.\n\nExample of correct event payload structure:\n```javascript\n{\n  id: 1,\n  imageUrl: 'http://path/to/image',\n  image: File(),\n  contents: 'hello',\n  date: '16:31'\n}\n```\n\n### Images\n\nYou can upload and receive images. To attach image, use paperclip button. Image will be emitted in message on `image` (as `File` object) and `imageUrl` (path `string`) properties.\n\n### Commands\n\nTo start development, you can use hot reload mode:\n```\nnpm run serve\n```\n\nTo build production version:\n```\nnpm run build\n```\n\nTo run tests:\n```\nnpm test\n```\n\n### Mock data\n\nTo attach mock data, just pass logic prop `attachMock` to BasicVueChat.\n\n## Customization\n\n### Styles\nStyles are imported in main `BasicVueChat` component and variables have `!default` values, so it means that you can override default values by defining your own variables before styles import.\n\n```scss\n\u003cstyle lang=\"scss\"\u003e\n$primary: red;\n// above the following import you can override default values of variables like $primary \n@import \"../../assets/scss/main.scss\";\n\u003c/style\u003e\n```\n\n### Title\n\nPass prop `title` to BasicVueChat component.\n```html\n\u003cbasic-vue-chat :title=\"'My Best Team'\" /\u003e\n```\n\n### Initial data\n\nPass prop `initialFeed` to BasicVueChat component.\n```html\n\u003cbasic-vue-chat :initial-feed=\"feed\" /\u003e\n```\nExample of correct data structure:\n```javascript\nconst feed = [\n  {\n    id: 1,\n    author: 'Person',\n    imageUrl: 'http://path/to/image',\n    contents: 'hi there',\n    date: '16:30'\n  },\n  {\n    id: 0,\n    author: 'Me',\n    contents: 'hello',\n    date: '16:30'\n  }\n]\n```\n\nPass prop `initialAuthorId` to BasicVueChat component to define current user's ID. Default value is `0`.\n\n### Styling\n\nChat uses SCSS, so you can easily override variables used in project. You can find them in `/src/assets/scss/modules/_variables.scss`. All variables have default values.\n\n| Description | Variable | Default value |\n|---|---|---|\n| Primary color | $primary | $slate-blue (#6B63D8) |\n| Secondary color | $secondary | $lavender (#B284ED) |\n| Header color | $header-color | $ghost-white (#FAF9FF) |\n| Input background color | $input-background-color | $alice-blue (#F2EFFF) |\n| Font family | $font-family | 'Source Sans Pro', sans-serif |\n| Font weight | $font-weight | 400 |\n| Font size | $font-size | 14px |\n| Dark text color | $dark-text-color | $madison (#2C3E50) |\n| Light text color | $light-text-color | $ghost-white (#FAF9FF) |\n| Dark background color | $dark-bg | $madison (#2C3E50) |\n| Light background color | $light-bg | $white (#FFFFFF) |\n| Chat window width | $window-width | 500px |\n| Chat window height | $window-height | 400px |\n| Message max width | $message-max-width | 200px |\n\n## Code structure\n\n1. assets\n    - Sass standard CSS code structure\n    - Components styles in `partials` directory\n    - Variables and settings in `modules` directory\n2. components\n    - chat's components are in subdirectories of `basic-vue-chat` directory\n3. helpers\n    - reusable helpers for scrolling functionalities\n4. App.vue - runner file\n5. main.js - project config\n\n\n## Technologies used\n\n1. JavaScript\n    * Vue\n    * Moment.js\n2. HTML5\n3. CSS\n    * SCSS\n    * BEM\n4. Tests\n    * Jest\n    * Vue test utils\n5. Tooling\n    * npm\n6. Continuous Integration\n    * Travis CI\n7. Linting\n    * ESLint standard config\n\nDeveloped and tested under macOS High Sierra 10.13 and Google Chrome 69.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmaczan%2Fbasic-vue-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmaczan%2Fbasic-vue-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmaczan%2Fbasic-vue-chat/lists"}