Vue.js Client in Browser

I want to be able to publish to Confluent Cloud topics or subscribe to them from a Vue.js App. What is the recommended architecture for doing so? For example, based on a user click I can trigger upstream events. Or subscribe to alerts from my alerts topic and add them to an alert queue in the UI.
I have Kafka.js working but it is only available on server in Node.js.
This is mqtt-vue-hook is available for MQTT GitHub - tommy44458/mqtt-vue-hook: Connect to mqtt broker, support Vue3, Vite. .
Can I use this and still publish to a topic like I do with Kafka.js using the Confluent Client Node.js credential requirements (SASL)? I was hoping the Confluent MQTT Proxy was the answer so I don’t need a broker between it.
Or is there a better way?

I do see that standing up my own MQTT Broker would work with mqtt-vue-hook, such as HiveMQ MQTT.js - MQTT Client Library Encyclopedia or Waterstream. But I’m hoping I can avoid the additional overhead and cost and talk directly to Confluent topics.

I just don’t know if only a kafkajs client works like this or if I can make it work from MQTT-Vue-Hook which is a wrapper for MQTT.js. Seems sad that Confluent would require a 3rd party broker, so I hope it doesn’t.