npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

vue-steam-chat

1.0.0 • Public • Published

vue-steam-chat - a steam like chat component

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

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;">
    <vue-steam-chat
      :messages="messages"
      @vue-steam-chat-on-message="onNewMessage">
    </vue-steam-chat>
  </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: {
    'vue-steam-chat': 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.

install

npm i vue-steam-chat

Downloadsweekly downloads

4

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability