The Most Trusted MQTT Platform for loV and Connected Cars →

How to use MQTT in the Vue project

Oct 27, 2020
How to use MQTT in the Vue project

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

MQTT is a kind of lightweight IoT messaging protocol based on the publish/subscribe model. This protocol provides one-to-many message distribution and decoupling of applications. It has several advantages which are low transmission consumption and protocol data exchange, minimized network traffic, and three different service quality levels of messages which can meet different delivery needs.

This article mainly introduces how to use MQTT in the Vue project, and implements the connection, subscription, messaging, unsubscribing and other functions between the client and MQTT broker.

To create an MQTT connection in Vue 3 application using MQTT.js, please refer to https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Vue3.js

Project initialization

Create project

The reference link is as follows:


vue create vue-mqtt-test

Install MQTT client library

The following method 2 and 3 are more suitable for the project that directly introduces Vue.js.

  1. Installed from the command line, either using npm or yarn (one or the other)

    npm install mqtt --save
    # or yarn
    yarn add mqtt
  2. Import via CDN

    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  3. Download locally, then import using relative paths

    <script src="/your/path/to/mqtt.min.js"></script>

The use of MQTT

Connect to the MQTT broker

This article will use the free public MQTT broker provided by EMQX. This service was created based on the EMQX MQTT IoT cloud platform. The information about broker access is as follows:

  • Broker: broker.emqx.io
  • TCP Port: 1883
  • WebSocket Port: 8083
  • WebSocket Secure Port: 8084

Open Manufacturing Hub
A Practical Guide to MQTT Broker Selection
Download this practical guide and learn what to consider when choosing an MQTT broker.
Get the eBook →

The key code of connection:

import mqtt from "mqtt";

export default {
  data() {
    return {
      connection: {
        protocol: "ws",
        host: "broker.emqx.io",
        // ws: 8083; wss: 8084
        port: 8083,
        endpoint: "/mqtt",
        // for more options, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
        clean: true,
        connectTimeout: 30 * 1000, // ms
        reconnectPeriod: 4000, // ms
        clientId: "emqx_vue_" + Math.random().toString(16).substring(2, 8),
        // auth
        username: "emqx_test",
        password: "emqx_test",
      subscription: {
        topic: "topic/mqttx",
        qos: 0,
      publish: {
        topic: "topic/browser",
        qos: 0,
        payload: '{ "msg": "Hello, I am browser." }',
      receiveNews: "",
      qosList: [0, 1, 2],
      client: {
        connected: false,
      subscribeSuccess: false,
      connecting: false,
      retryTimes: 0,

  methods: {
    initData() {
      this.client = {
        connected: false,
      this.retryTimes = 0;
      this.connecting = false;
      this.subscribeSuccess = false;
    handleOnReConnect() {
      this.retryTimes += 1;
      if (this.retryTimes > 5) {
        try {
          this.$message.error("Connection maxReconnectTimes limit, stop retry");
        } catch (error) {
    createConnection() {
      try {
        this.connecting = true;
        const { protocol, host, port, endpoint, ...options } = this.connection;
        const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
        this.client = mqtt.connect(connectUrl, options);
        if (this.client.on) {
          this.client.on("connect", () => {
            this.connecting = false;
            console.log("Connection succeeded!");
          this.client.on("reconnect", this.handleOnReConnect);
          this.client.on("error", (error) => {
            console.log("Connection failed", error);
          this.client.on("message", (topic, message) => {
            this.receiveNews = this.receiveNews.concat(message);
            console.log(`Received message ${message} from topic ${topic}`);
      } catch (error) {
        this.connecting = false;
        console.log("mqtt.connect error", error);

Subscribe topic

doSubscribe() {
  const { topic, qos } = this.subscription
  this.client.subscribe(topic, { qos }, (error, res) => {
    if (error) {
      console.log('Subscribe to topics error', error)
    this.subscribeSuccess = true
    console.log('Subscribe to topics res', res)


doUnSubscribe() {
  const { topic } = this.subscription
  this.client.unsubscribe(topic, error => {
    if (error) {
      console.log('Unsubscribe error', error)

Publish messages

doPublish() {
  const { topic, qos, payload } = this.publish
  this.client.publish(topic, payload, { qos }, error => {
    if (error) {
      console.log('Publish error', error)


destroyConnection() {
  if (this.client.connected) {
    try {
      this.client.end(false, () => {
        console.log('Successfully disconnected!')
    } catch (error) {
      console.log('Disconnect failed', error.toString())


We use Vue to write the following simple browser application. This application has: create connections, subscribe topics, messaging, unsubscribe, disconnect and other functions.

The complete code for this project: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-Vue.js


Use MQTT 5.0 client tool - MQTTX as another client to test messaging.


If you unsubscribe on the browser side, before MQTTX sends the second message, the browser will not receive the subsequent messages from MQTTX.


In summary, we have implemented the creation of an MQTT connection in a Vue project, simulated subscribing, sending and receiving messages, unsubscribing, and disconnecting between the client and MQTT broker.

As one of the three most popular front-end frames, Vue can be used on the browser-side, and can also be used on the mobile side. Combining the MQTT protocol and MQTT cloud service, can develop many interesting applications, for example, a customer service chat system or a management system that monitors IoT device information in real-time.

Next, you can check out The Easy-to-understand Guide to MQTT Protocol series of articles provided by EMQ to learn about MQTT protocol features, explore more advanced applications of MQTT, and get started with MQTT application and service development.


Try EMQX Cloud for Free
No credit card required
Get Started →

Related Posts

Feb 9, 2024Shifan Yu
How to Use MQTT in The React Project

This article introduces how to use MQTT in the React project, and implement the connection, subscription and messaging, etc of MQTT.

Oct 29, 2020Shifan Yu
How to use MQTT in the Electron project

This article introduces how to use MQTT in the Electron project, and implement the connection, subscription and messaging, etc of MQTT.