This project contains a demo client showing integration between Lightstreamer JavaScript Client library and Vue.js
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Lightstreamer - Basic Stock-List Demo - Vue.js Client

This project contains a demo application showing the integration between the Lightstreamer Web Client library and Vue.js.

Live Demo

Demo ScreenShot

View live demo


This demo displays real-time market data for ten stocks generated by a feed simulator and is based on Basic Stock-List Demo.

This project uses the JavaScript Web Client API for Lightstreamer to handle the communications with Lightstreamer Server and uses Vue.js library to display the real-time data pushed by Lightstreamer Server.

The onItemUpdate callback, of a Lightstreamer Subscription, updates an object binded to a Vue.js component, which keeps in sync the real-time data with the DOM.

If you want to go deeper into Vue, check out the Vue.js site.


If you want to install a version of one of these demos pointing to your local Lightstreamer Server, follow these steps:

  • Note that, as prerequisite, the Lightstreamer - Stock- List Demo - Java Adapter has to be deployed on your local Lightstreamer Server instance. Please check out that project and follow the installation instructions provided with it.
  • Launch Lightstreamer Server.
  • Get the lightstreamer.js file from the latest Lightstreamer distribution and put it in the src/[demo_name]/js folder of the demo (if that is the case, please create it). Alternatively, you can build a lightstreamer.js file from the online generator. In that case, be sure to include the LightstreamerClient, Subscription, ConnectionSharing, and StatusWidget modules and to use the "Use namespaced globals" version.

You can deploy these demos to use the Lightstreamer server as Web server or in any external Web Server you are running. If you choose the former case, please create the folders <LS_HOME>/pages/demos/[demo_name] then copy here the contents of the src/[demo_name] folder of this project.
The client demos configuration assumes that Lightstreamer Server, Lightstreamer Adapters, and this client are launched on the same machine. If you need to target a different Lightstreamer server, please search this line:

lsClient = new Lightstreamer.LightstreamerClient(protocolToUse+"//localhost:"+portToUse,"DEMO");

in js/index.js, and change it accordingly.

The demo is now ready to be launched.

See Also

Lightstreamer Adapters Needed by These Demo Clients

Related Projects

Lightstreamer Compatibility Notes

  • Compatible with Lightstreamer Web Client library version 6.0 or newer.