Skip to content
This repository has been archived by the owner on Oct 2, 2020. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
November 11, 2016 16:18
September 2, 2018 12:41
November 11, 2016 16:00
November 11, 2016 16:00
November 11, 2016 16:00
August 29, 2018 02:13
November 11, 2016 16:00
November 11, 2016 16:00

vue-websocket NPM version

VueJS v1.x compatible VueJS v2.x compatible

A plugin for Vue.js.

This package does not support native websockets. At the time, we recommend using vue-native-websocket or implementing it yourself. For ongoing discussion on this, please visit #2.


You can either install this package with npm, or manually by downloading the primary plugin file.


$ npm install -S vue-websocket


Download the production vue-websocket.js file. This link is a mirror of the same file found in the dist directory of this project.


Register the plugin. By default, it will connect to /:

import VueWebsocket from "vue-websocket";

Or to connect to another address:

Vue.use(VueWebsocket, "ws://otherserver:8080");

You can also pass options:

Vue.use(VueWebsocket, "ws://otherserver:8080", {
	reconnection: false

To use it in your components:

	export default {

		methods: {
			add() {
		  		// Emit the server side
		  		this.$socket.emit("add", { a: 5, b: 3 });

			get() {
		  		this.$socket.emit("get", { id: 12 }, (response) => {

		socket: {
			// Prefix for event names
			// prefix: "/counter/",

			// If you set `namespace`, it will create a new socket connection to the namespace instead of `/`
			// namespace: "/counter",

			events: {

				// Similar as this.$socket.on("changed", (msg) => { ... });
				// If you set `prefix` to `/counter/`, the event name will be `/counter/changed`
				changed(msg) {
					console.log("Something changed: " + msg);

				/* common events
				connect() {
					console.log("Websocket connected to " + this.$socket.nsp);

				disconnect() {
					console.log("Websocket disconnected from " + this.$socket.nsp);

				error(err) {
					console.error("Websocket error!", err);





This command will build a distributable version in the dist directory:

$ npm run build


This package uses karma for testing. You can run the tests like so:

$ npm test


Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.


vue-websocket is available under the MIT license.


Copyright © 2018 Icebob

@icebob @icebob