DEV Community

Ivan
Ivan

Posted on

Dashboard em Tempo Real com Vue.js + Quasar + MQTT (Usando HiveMQ)

Vamos configurar um painel bonito, responsivo para monitoramento de sensores, dispositivos IoT ou até servidores, recebendo dados em tempo real via MQTT, usando apenas Vue.js + Quasar Framework no frontend.

Se você trabalha com automação, IoT, ou gosta de acompanhar dados dos seus dispositivos, sensores, ou servidores, provavelmente já pensou em ter um dashboard bonito, funcional e em tempo real.

Com Vue.js + Quasar e um broker MQTT como o HiveMQ, você cria isso rapidamente, usando só frontend. Perfeito para:

 Monitoramento de sensores (temperatura, energia, ambiente...) Automação residencial Status de servidores Qualquer aplicação que envie dados via MQTT 
Enter fullscreen mode Exit fullscreen mode
  • Tecnologias Usadas

    Vue.js 3 (Composition API)

    Quasar Framework (UI bonita, responsiva e poderosa)

    MQTT.js (Cliente MQTT via WebSocket)

    HiveMQ Cloud (Broker MQTT gratuito)

  • Broker Gratuito Usado

Vamos usar o broker gratuito da HiveMQ:
🔗 https://www.hivemq.com/demos/websocket-client/

Configurações para WebSocket:

Broker: broker.hivemq.com Porta: 8000 (WebSocket sem SSL) ou 8884 (WebSocket com SSL) (pode testar ambos) URL WebSocket: ws://broker.hivemq.com:8000/mqtt ou com SSL: wss://broker.hivemq.com:8884/mqtt 
Enter fullscreen mode Exit fullscreen mode

Utilizando ambiente DEV em linux Debian com @quasar/cli v2.5.0

Setup do Projeto
1️ Crie um novo projeto Quasar:

npm install -g @quasar/cli npm init quasar #App with quasar->ProjectFolder->mqtt-dashboard # utilizando Pinia como state Management e Axios cd mqtt-dashboard #testar o ambiente dev com quasar dev 
Enter fullscreen mode Exit fullscreen mode

Com isso o servidor dev local acessivel em http://localhost:9000/#/

Estrutura do projeto

. ├── index.html ├── jsconfig.json ├── node_modules ├── package.json ├── package-lock.json ├── postcss.config.cjs ├── public ├── quasar.config.js ├── README.md └── src 4 directories, 7 files 
Enter fullscreen mode Exit fullscreen mode

Instale o MQTT.js:

npm install mqtt 
Enter fullscreen mode Exit fullscreen mode

🔌 Conectando ao MQTT
Crie um composable useMqtt.js:

mkdir src/composables #cria arquivo vazio, abaixo adicionamos conteúdo... touch src/composables/useMqtt.js 
Enter fullscreen mode Exit fullscreen mode

Adicione esse conteúdo

import { ref, onMounted, onBeforeUnmount } from 'vue' import mqtt from 'mqtt' export function useMqtt() { const temperatura = ref(0) const status = ref('Desconectado') const client = ref(null) const connect = () => { const url = 'ws://broker.hivemq.com:8000/mqtt' client.value = mqtt.connect(url) client.value.on('connect', () => { status.value = 'Conectado' client.value.subscribe('teste/sensor/temperatura') }) client.value.on('message', (topic, payload) => { if (topic === 'teste/sensor/temperatura') { temperatura.value = parseFloat(payload.toString()) } }) client.value.on('error', (err) => { status.value = 'Erro' console.error('Erro MQTT:', err) }) client.value.on('close', () => { status.value = 'Desconectado' }) } const disconnect = () => { client.value?.end() status.value = 'Desconectado' } onMounted(connect) onBeforeUnmount(disconnect) return { temperatura, status } } 
Enter fullscreen mode Exit fullscreen mode

Interface Simples
No seu IndexPage.vue, substitua o conteudo por:

<template> <q-page padding> <div class="q-pa-md"> <q-card> <q-card-section> <div class="text-h6">Dashboard IoT - MQTT</div> <div>Status: <q-badge :color="status === 'Conectado' ? 'green' : 'red'">{{ status }}</q-badge></div> </q-card-section> <q-separator /> <q-card-section> <div class="text-subtitle1"> 🌡️ Temperatura: <b>{{ temperatura }} ºC</b> </div> </q-card-section> </q-card> </div> </q-page> </template> <script setup> import { useMqtt } from 'src/composables/useMqtt' const { temperatura, status } = useMqtt() </script> 
Enter fullscreen mode Exit fullscreen mode

Testando

👉 Envie dados de teste usando o próprio Web Client da HiveMQ:

  1. Na guia 'Connection' clique connect
  2. Abaixo em 'Publish' coloque o tópico abaixo e o valor '25' no campo mensagem.

🔗 https://www.hivemq.com/demos/websocket-client/

Tópico: teste/sensor/temperatura Mensagem: 25 (ou qualquer valor de teste) 
Enter fullscreen mode Exit fullscreen mode
  1. Clique em Publish.

Seu dashboard atualizará em tempo real!
Expandindo

🔌 Adicione mais tópicos (ex.: umidade, energia, presença). 📈 Inclua gráficos com apexcharts ou chart.js. 📲 Pode hospedar isso no seu próprio domínio. 
Enter fullscreen mode Exit fullscreen mode

Conclusão

É simples montar um dashboard em tempo real usando apenas frontend, com Vue.js, Quasar e MQTT. Isso é perfeito para automação residencial, IoT, monitoramento de energia (como eu uso nos meus projetos) e muito mais.
Se quiser, pode expandir adicionando banco de dados, notificações, alertas ou integração com ferramentas como n8n ou Node-RED.

Arquivos do projeto;
https://github.com/ivanrochacardoso/mqtt_quasar_dashboard

Top comments (0)