vue-mqtt

library2.0.3jsnpmunverified

Vue 2 plugin that integrates MQTT over WebSocket using the MQTT.js library, enabling real-time messaging in Vue applications. Current stable version is 2.0.3 with no active releases in recent years. It provides a simple Vue plugin interface to configure a global MQTT client, then use $mqtt on instances for subscribe/publish and declarative topic handlers in component options. Key differentiators: minimal setup, subscription at component level, and automatic client management. Limited to Vue 2 and not compatible with Vue 3 or newer MQTT.js versions.

messaging devops

npm install vue-mqtt

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-MQTT

vue-mqtt

messagingjavascriptv2.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import VueMqtt from 'vue-mqtt'

✗ const VueMqtt = require('vue-mqtt')

ESM default import; CommonJS require may not work due to module format.

$mqtt (instance property)

✓ this.$mqtt.subscribe('topic')

✗ this.vueMqtt.subscribe('topic')

After Vue.use(), $mqtt is injected and available in all components.

mqtt option (component)

✓ export default { mqtt: { 'topic': callback } }

✗ export default { mqtt: { subscribe: callback } }

The option is an object with topic strings as keys, not a method call.

Shows basic setup with Vue.use(), adding a subscription via mqtt option, and a method to publish.

// Install: npm install vue-mqtt --save import Vue from 'vue'; import VueMqtt from 'vue-mqtt'; Vue.use(VueMqtt, 'ws://broker.emqx.io:8083/mqtt', { clean: true, connectTimeout: 4000 }); new Vue({ el: '#app', mqtt: { 'test/topic': function (data) { console.log('Received:', data); } }, methods: { publishMessage() { this.$mqtt.publish('test/topic', 'Hello MQTT'); } } });

Debug

Known issues

breakingVue.use() must be called before creating any Vue instance. Calling it after will not inject $mqtt.

fix

Call Vue.use(VueMqtt, ...) at the entry point of your app, before new Vue().

affects: >=1.0.0

gotchaThe mqtt option in component definition must be an object with topic keys; it does not support arrays or nested objects.

fix

Define subscriptions as a flat object where keys are MQTT topic strings.

affects: >=1.0.0

deprecatedThe default export 'vue-mqtt' is not a constructor; Vue.use() expects a plugin object. Using import { VueMqtt } instead of default import will fail.

fix

Use default import: import VueMqtt from 'vue-mqtt'.

affects: >=2.0.0

Errors

Common errors & fixes

Property or method "$mqtt" is not defined on the instance but referenced during render

Vue.use() called after component instantiation or not called at all.

fix

Ensure Vue.use(VueMqtt, ...) is called before new Vue() in your entry file.

Uncaught TypeError: Cannot read properties of undefined (reading 'subscribe')

Options object passed to Vue.use() is missing or malformed, causing client creation to fail.

fix

Double-check the broker URL and options object passed to Vue.use(). Ensure URL is a valid WebSocket endpoint.

Module not found: Error: Can't resolve 'vue-mqtt'

Package not installed or import path incorrect.

fix

Run 'npm install vue-mqtt --save' and ensure import path is correct.

Upgrade

Version history

2.0.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/nik-zp/vue-mqtt ↗

packagevue-mqtt ↗

homepagehttps://github.com/nik-zp/vue-mqtt ↗