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