Data

Tools

Indexes

Applications

Experiments

Open Source Science

basic-vue-chat

💬 Easy to use Vue chat

https://github.com/jmaczan/basic-vue-chat

Science Score: 44.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • â—‹
    DOI references
  • â—‹
    Academic publication links
  • â—‹
    Committers with academic emails
  • â—‹
    Institutional organization owner
  • â—‹
    JOSS paper metadata
  • â—‹
    Scientific vocabulary similarity
    Low similarity (13.7%) to scientific vocabulary

Keywords

chat chat-application chatroom vue vuejs vuejs2 vuex

Keywords from Contributors

atomic-css bulma bulma-framework bulma-helpers css-framework flexbox functional-css
Last synced: 6 months ago · JSON representation ·

Repository

💬 Easy to use Vue chat

Basic Info
Statistics
  • Stars: 76
  • Watchers: 4
  • Forks: 20
  • Open Issues: 0
  • Releases: 0
Topics
chat chat-application chatroom vue vuejs vuejs2 vuex
Created over 7 years ago · Last pushed over 2 years ago
Metadata Files
Readme Citation

README.md

basic-vue-chat logo

basic-vue-chat

Version

Implementation of Vue-based chat.

Installation

You can install the component using package managers, such as npm or yarn or install component from the repository.

npm

bash npm i basic-vue-chat

yarn

bash yarn add basic-vue-chat

using repository

bash git clone https://github.com/jmaczan/basic-vue-chat.git cd basic-vue-chat npm i

Dependencies

Components uses Vue (vue package), Fontawesome and Moment.js for Vue (vue-moment).

Usage

Chat 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: html <basic-vue-chat />

Pushing messages

To push message to chat, just pass newMessage prop to BasicVueChat. Example: html <basic-vue-chat :new-message="message" />

The message object above may be part of data in your Vue component in which you will use BasicVueChat.

Example of correct message structure: javascript { id: 0, author: 'Person', imageUrl: 'http://path/to/image', image: '', contents: 'hi there', date: '16:30' }

You can find example of message pushing in App.vue file.

Handling messages from user

When 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: html <basic-vue-chat @newOwnMessage="onNewOwnMessage" /> where onNewOwnMessage(message) is a method in your Vue component in which you will use BasicVueChat.

Example of correct event payload structure: javascript { id: 1, imageUrl: 'http://path/to/image', image: File(), contents: 'hello', date: '16:31' }

Images

You 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.

Commands

To start development, you can use hot reload mode: npm run serve

To build production version: npm run build

To run tests: npm test

Mock data

To attach mock data, just pass logic prop attachMock to BasicVueChat.

Customization

Styles

Styles 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.

scss <style lang="scss"> $primary: red; // above the following import you can override default values of variables like $primary @import "../../assets/scss/main.scss"; </style>

Title

Pass prop title to BasicVueChat component. html <basic-vue-chat :title="'My Best Team'" />

Initial data

Pass prop initialFeed to BasicVueChat component. html <basic-vue-chat :initial-feed="feed" /> Example of correct data structure: javascript const feed = [ { id: 1, author: 'Person', imageUrl: 'http://path/to/image', contents: 'hi there', date: '16:30' }, { id: 0, author: 'Me', contents: 'hello', date: '16:30' } ]

Pass prop initialAuthorId to BasicVueChat component to define current user's ID. Default value is 0.

Styling

Chat 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.

| Description | Variable | Default value | |---|---|---| | Primary color | $primary | $slate-blue (#6B63D8) | | Secondary color | $secondary | $lavender (#B284ED) | | Header color | $header-color | $ghost-white (#FAF9FF) | | Input background color | $input-background-color | $alice-blue (#F2EFFF) | | Font family | $font-family | 'Source Sans Pro', sans-serif | | Font weight | $font-weight | 400 | | Font size | $font-size | 14px | | Dark text color | $dark-text-color | $madison (#2C3E50) | | Light text color | $light-text-color | $ghost-white (#FAF9FF) | | Dark background color | $dark-bg | $madison (#2C3E50) | | Light background color | $light-bg | $white (#FFFFFF) | | Chat window width | $window-width | 500px | | Chat window height | $window-height | 400px | | Message max width | $message-max-width | 200px |

Code structure

  1. assets
    • Sass standard CSS code structure
    • Components styles in partials directory
    • Variables and settings in modules directory
  2. components
    • chat's components are in subdirectories of basic-vue-chat directory
  3. helpers
    • reusable helpers for scrolling functionalities
  4. App.vue - runner file
  5. main.js - project config

Technologies used

  1. JavaScript
    • Vue
    • Moment.js
  2. HTML5
  3. CSS
    • SCSS
    • BEM
  4. Tests
    • Jest
    • Vue test utils
  5. Tooling
    • npm
  6. Continuous Integration
    • Travis CI
  7. Linting
    • ESLint standard config

Developed and tested under macOS High Sierra 10.13 and Google Chrome 69.

Owner

  • Name: JÄ™drzej Maczan
  • Login: jmaczan
  • Kind: user

Citation (CITATION.cff) 

cff-version: 1.2.0
message: "If you use this software, please cite it as below."
authors:
- family-names: "Maczan"
  given-names: "Jędrzej Paweł"
  orcid: "https://orcid.org/0000-0003-1741-6064"
title: "Basic Vue Chat"
date-released: 2022-09-08
url: "https://github.com/jmaczan/basic-vue-chat"

GitHub Events

Total
  • Watch event: 3
  • Fork event: 1
Last Year
  • Watch event: 3
  • Fork event: 1

Committers

Last synced: about 1 year ago

All Time
  • Total Commits: 49
  • Total Committers: 4
  • Avg Commits per committer: 12.25
  • Development Distribution Score (DDS): 0.082
Past Year
  • Commits: 0
  • Committers: 0
  • Avg Commits per committer: 0.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
jmaczan j****n@g****m 45
Jędrzej Paweł Maczan j****l@m****l 2
Maczan J****n@d****m 1
Ezra Obiwale c****t@e****m 1
Committer Domains (Top 20 + Academic)
ezraobiwale.com: 1 dnv.com: 1 maczan.pl: 1

Issues and Pull Requests

Last synced: 6 months ago

All Time
  • Total issues: 12
  • Total pull requests: 1
  • Average time to close issues: 5 months
  • Average time to close pull requests: about 2 hours
  • Total issue authors: 9
  • Total pull request authors: 1
  • Average comments per issue: 2.08
  • Average comments per pull request: 4.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Issue authors: 0
  • Pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • tsulatsitamim (2)
  • ghost (2)
  • ZJUGuoShuai (2)
  • ChungMasterFlex (1)
  • Issabln (1)
  • hwadii (1)
  • RayChenCode (1)
  • mberkeland (1)
  • Kaavaal (1)
Pull Request Authors
  • ezra-obiwale (1)
Top Labels
Issue Labels
bug (2) enhancement (1)
Pull Request Labels

Packages

  • Total packages: 1
  • Total downloads:
    • npm 97 last-month
  • Total dependent packages: 1
  • Total dependent repositories: 29
  • Total versions: 29
  • Total maintainers: 1
npmjs.org: basic-vue-chat

[![Build Status](https://api.travis-ci.com/jmaczan/basic-vue-chat.svg?branch=master)](https://travis-ci.com/jmaczan/basic-vue-chat) [![Version](https://img.shields.io/npm/v/basic-vue-chat.svg)](https://www.npmjs.com/package/basic-vue-chat)

  • Versions: 29
  • Dependent Packages: 1
  • Dependent Repositories: 29
  • Downloads: 97 Last month
Rankings
Dependent repos count: 2.4%
Forks count: 5.2%
Stargazers count: 5.5%
Average: 8.8%
Downloads: 10.0%
Dependent packages count: 21.1%
Maintainers (1)
jmaczan
Last synced: 6 months ago

Dependencies

package-lock.json npm
  • 1854 dependencies
package.json npm
  • @vue/cli-plugin-babel ^3.0.0-rc.12 development
  • @vue/cli-plugin-e2e-cypress ^3.0.0-rc.12 development
  • @vue/cli-plugin-eslint ^3.0.0-rc.12 development
  • @vue/cli-plugin-unit-jest ^3.0.5 development
  • @vue/cli-service ^3.0.0-rc.12 development
  • @vue/eslint-config-standard ^3.0.5 development
  • @vue/test-utils ^1.0.0-beta.20 development
  • babel-core 7.0.0-bridge.0 development
  • babel-jest ^23.0.1 development
  • chai ^4.1.2 development
  • lint-staged ^7.2.2 development
  • node-sass ^4.9.0 development
  • rollup ^0.66.6 development
  • rollup-plugin-buble ^0.19.4 development
  • rollup-plugin-vue ^4.3.2 development
  • sass-loader ^7.0.1 development
  • vue-template-compiler ^2.5.17 development
  • @fortawesome/fontawesome-svg-core ^1.2.10
  • @fortawesome/free-solid-svg-icons ^5.6.1
  • @fortawesome/vue-fontawesome ^0.1.3
  • emoji-mart-vue ^2.6.6
  • i ^0.3.6
  • npm ^6.5.0
  • vue ^2.5.17
  • vue-moment ^4.0.0