Vue, one of the most popular frameworks for building user interfaces, is highly flexible and ideal for incremental adoption. With its focus on the view layer, Vue is easy to integrate into existing projects or use with complementary libraries. When paired with modern tooling, Vue excels at creating advanced Single-Page Applications (SPAs).

MQTT (Message Queuing Telemetry Transport) is a lightweight messaging protocol tailored for IoT applications. Using the publish/subscribe model, MQTT efficiently enables one-to-many communication and decouples application logic. Its key advantages include low transmission overhead, minimal network traffic, and support for three Quality of Service (QoS) levels to cater to diverse message delivery needs.

In this tutorial, we’ll demonstrate how to integrate MQTT into your Vue project to quickly build MQTT Web application and enable seamless real-time IoT communication, covering essential operations like establishing a connection, subscribing to topics, publishing messages, and managing disconnections.

To create an MQTT connection in Vue 3 application using MQTT.js, please refer to MQTT-Client-Examples/mqtt-client-Vue3.js at master · emqx/MQTT-Client-Examples

Setting Up Your Vue Project with MQTT

Initialize Your Vue Project

To create a Vue application, you can refer to the Creating a Vue Application section in the Vue documentation.

Examples:

npm create vue@latest

Install the MQTT Client Library

To use MQTT in your Vue project, you'll need to install the MQTT.js library. There are several ways to do this:

Installed from the command line, either using npm or yarn (one or the other)
```
npm install mqtt --save
# or yarn
yarn add mqtt
# or pnpm
pnpm add mqtt
```

Import via CDN

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

Download locally, then import using relative paths

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

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

Implementing MQTT in Your Vue Project

Connect to an MQTT Broker

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

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

Here's the code to establish a connection:

Connect over WebSocket Port

You can set a client ID, username, and password with the following code. The client ID should be unique.

const connection = reactive({
  clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8),
  username: "emqx_test",
  password: "emqx_test",
  // ...other connection options
});
const { ...options } = connection

You can establish a connection between the client and the MQTT broker using the following code:

const client = mqtt.connect("ws://broker.emqx.io:8083/mqtt", options);

Connect over WebSocket Secure Port

If TLS/SSL encryption is enabled, the connection parameter options are the same as for establishing a connection via the WebSocket port, you just need to be careful to change the protocol to wss and match the correct port number.

You can establish a connection between the client and the MQTT broker using the following code:

const client = mqtt.connect("wss://broker.emqx.io:8084/mqtt", options);

Specify a topic and the corresponding QoS level to be subscribed.

// Topic & QoS
const subscription = ref({
  topic: "topic/mqttx",
  qos: 0 as mqtt.QoS,
});

const doSubscribe = () => {
  const { topic, qos } = subscription.value;
  client.subscribe(
    topic,
    { qos },
    (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
      if (error) {
        console.log("subscribe error:", error);
        return;
      }
      console.log("subscribe successfully:", granted);
    }
  );
};

Unsubscribe

You can unsubscribe using the following code, specifying the topic and corresponding QoS level to be unsubscribed.

const doUnSubscribe = () => {
  const { topic, qos } = subscription.value;
  client.unsubscribe(topic, { qos }, (error) => {
    if (error) {
      console.log("unsubscribe error:", error);
      return;
    }
    console.log(`unsubscribed topic: ${topic}`);
  });
};

Publish Messages

When publishing a message, the MQTT broker must be provided with information about the target topic and message content.

const publish = ref({
  topic: "topic/browser",
  payload: '{ "msg": "Hello, I am browser." }',
  qos: 0 as mqtt.QoS,
});

const doPublish = () => {
  const { topic, qos, payload } = publish.value;
  client.publish(topic, payload, { qos }, (error) => {
    if (error) {
      console.log("publish error:", error);
      return;
    }
    console.log(`published message: ${payload}`);
  });
};

Disconnect from the Broker

To disconnect the client from the broker, use the following code:

const destroyConnection = () => {
  if (client.connected) {
    try {
      client.end(false, () => {
        console.log("disconnected successfully");
      });
    } catch (error) {
      console.log("disconnect error:", error);
    }
  }
};

Testing the MQTT Connection in Vue

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: MQTT-Client-Examples/mqtt-client-Vue.js at master · emqx/MQTT-Client-Examples.

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

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

Summary

In this guide, we demonstrated how to integrate MQTT with Vue to create a real-time IoT Web Web application. From establishing a connection to managing subscriptions and messages, the combination of Vue and MQTT opens up endless possibilities for developing robust IoT solutions.

Want to dive deeper into MQTT? Check out EMQ's Easy-to-understand Guide to MQTT Protocol for more insights and advanced use cases.

Resources

Talk to an Expert

Contact Us →

Blog

Tag: Vue

Subscribe to our blogs