🎮 Vue.js component to integrate steam like chat inside an application
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
docs
src
tests
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.nvmrc
.prettierrc
LICENSE
README.md
build.config.js
circle.yml
package.json
poi.config.js
styleguide.config.js
yarn.lock

README.md

vue-steam-chat - a steam like chat component

CircleCI Coverage Status npm version npm downloads badge Donate badge Donate badge License

vue-steam-chat logo


vue steam chat showcase picture in default size

Simple integration

vue-steam-chat is designed for an easy integration as a Vue.js component. You just need to install the package and require two dependencies. It is responsive and can be integrated in every Vue.js application.

Dependencies

No additional dependencies. Just Vue :)

Dependency Version
Vue.js >= 2.0.0

Installation

Using yarn

yarn add vue-steam-chat

Using npm

npm i --save vue-steam-chat

How to use

Somewhere in your Vue.js single file component, you need to add the dependency to this package and the css file referenced for this component.

<template>
  <div style="height: 600px; width: 300px;">
    <VueSteamChat
      :messages="messages"
      @vue-steam-chat-on-message="onNewMessage"
    />
  </div>
</template>

<script>
import VueSteamChat from 'vue-steam-chat';

// This is required for styling the component. You can also write your own stylesheet. You can find my styles inside the vue component
require('vue-steam-chat/dist/index.css');

export default {
  name: 'vue-steam-chat',
  components: {
    VueSteamChat,
  },
  data() {
    return {
      messages: [{
        time: 1506117496,
        username: 'Gaben',
        text: 'I am really rich!!!',
      }, {
        time: 1506117500,
        username: 'Solo',
        text: 'But i am your employee',
      }],
    };
  },
  methods: {
    onNewMessage(message) {
      alert(message);
    },
  },
};
</script>

Development

Download this repository and install all dependencies.

Using yarn

yarn install
yarn run serve

Using npm

npm install
npm run serve

This will open a Vue Styleguidist under http://localhost:6062 with the component in different use cases.

Examples

  • Live version is work in progress

vue steam chat showcase picture in default size

vue steam chat showcase in responsive version

Motivation

Found an old codepen of myself and wanted to create a vue component out of it.

License

vue-steam-chat is realeased under the MIT License.