Easy to use VueJS chat

basic-vue-chat .Easy to use VueJS chat

basic-vue-chat

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

npm i basic-vue-chat

yarn

yarn add basic-vue-chat

using repository

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:

<basic-vue-chat />

Pushing messages

To push message to chat, just pass newMessage prop to BasicVueChat. Example:

<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:

{
  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:

<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:

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

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

<basic-vue-chat :title="'My Best Team'" />

Initial data

Pass prop initialFeed to BasicVueChat component.

<basic-vue-chat :initial-feed="feed" />

Example of correct data structure:

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.

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.

Download Details:

Author: jmaczan

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

vuejs vue javascript

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.