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
-
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
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
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
Instale o MQTT.js:
npm install mqtt
🔌 Conectando ao MQTT
Crie um composable useMqtt.js:
mkdir src/composables #cria arquivo vazio, abaixo adicionamos conteúdo... touch src/composables/useMqtt.js
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 } }
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>
Testando
👉 Envie dados de teste usando o próprio Web Client da HiveMQ:
- Na guia 'Connection' clique connect
- 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)
- 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.
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)