Création de la vue du debugger MQTT

- Lien sur la page d'accueil
- Configration du routeur
- Création des composants
  - affichage du formulaire de publication
  - affichage de la console de souscription
- Création de la vue de la page

src/components/MQTTDebugPublish.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>Publier sur MQTT</h1>
+    <select v-model="selectedTopic">
+      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
+    </select>
+    <input type="text" v-model="message" placeholder="Saisissez votre message">
+    <button @click="publishMessage">Publier sur MQTT</button>
+  </div>
+</template>
+
+<script>
+import mqtt from 'mqtt';
+
+export default {
+  data() {
+    return {
+      message: '', // Initialiser la variable message
+      selectedTopic: 'topic1',
+      topics: ['topic1', 'topic2', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10'], // Liste des topics
+    };
+  },
+  methods: {
+    publishMessage() {
+      const client = mqtt.connect('ws://localhost:9001');
+      client.on('connect', () => {
+        client.publish(this.selectedTopic, this.message);
+        client.end();
+      });
+    }
+  }
+}
+</script>