Vue.js in VtigerCRM integrieren: Erstellen Sie Ihren ersten Widget

Vue.js in VtigerCRM integrieren: Erstellen Sie Ihren ersten Widget

Vue.js ist ein progressives JavaScript-Framework, das sich ideal für die Erstellung interaktiver Benutzeroberflächen eignet – auch in VtigerCRM. In diesem Artikel zeige ich, wie Sie Vue.js in Vtiger einbinden und einen custom Widget entwickeln, das letzte Leads nach Benutzern und Branchen filtert.

Voraussetzungen

• Node.js (Version 14.x oder höher)
• Grundkenntnisse in Vue.js und Vtiger-Modulentwicklung

Schritt 1: Vue-CLI installieren

Global installieren:
npm install -g @vue/cli@next

---

Schritt 2: Vue-Projekt erstellen
1. Navigieren Sie ins Vtiger-Verzeichnis (z. B. `/var/www/vtiger`).  
2. Projekt initialisieren:  

vue create vue

3. Wählen Sie:
- Manually select features
- Vue 3
- Vuex (für State Management)
- Dedicated config files (Konfiguration in separaten Dateien)
- Keine Class-Style-Komponenten

---

Schritt 3: Abhängigkeiten installieren
Fügen Sie `cross-env` hinzu, um Umgebungsvariablen zu verwalten:

npm install cross-env --save-dev

---

Schritt 4: Vue-Projekt konfigurieren
Erstellen Sie eine `.env`-Datei im Stammverzeichnis:

VUE_APP_API_URL=http://ihr-vtiger-server/api
VUE_APP_VTIGER_SESSION=

--- Schritt 5: Widget-Komponente erstellen Erstellen Sie `src/components/LeadWidget.vue`:

<template>  
  <div>  
    <h3>Letzte Leads</h3>  
    <select v-model="selectedUser" @change="filterLeads">  
      <option v-for="user in users" :key="user.id" :value="user.id">{{ user.name }}</option>  
    </select>  
    <ul>  
      <li v-for="lead in filteredLeads" :key="lead.id">{{ lead.name }} ({{ lead.industry }})</li>  
    </ul>  
  </div>  
</template>  

<script>  
import { ref, computed, onMounted } from 'vue';  
import axios from 'axios';  

export default {  
  setup() {  
    const leads = ref([]);  
    const users = ref([]);  
    const selectedUser = ref(null);  

    const filteredLeads = computed(() => {  
      return leads.value.filter(lead =>  
        (!selectedUser.value || lead.assigned_user_id === selectedUser.value)  
      );  
    });  

    onMounted(async () => {  
      // Leads aus Vtiger-API abrufen  
      const { data } = await axios.get(`${process.env.VUE_APP_API_URL}/Leads`, {  
        headers: { 'Cookie': `vtiger=${process.env.VUE_APP_VTIGER_SESSION}` }  
      });  
      leads.value = data.result;  

      // Benutzerliste abrufen  
      const usersRes = await axios.get(`${process.env.VUE_APP_API_URL}/Users`);  
      users.value = usersRes.data.result;  
    });  

    return { filteredLeads, users, selectedUser };  
  }  
};  
</script>  

--- Schritt 6: Build durchführen Kompilieren Sie das Vue-Projekt:

npm run build

Die kompilierten Dateien (`dist/`) können nun in Vtiger eingebunden werden. --- Schritt 7: Widget in Vtiger integrieren 1. Erstellen Sie ein **Custom-Modul** oder erweitern Sie ein bestehendes. 2. Fügen Sie einen **Custom-Block** hinzu und binden Sie die Vue-App ein:

   // vtiger/modules/Leads/views/Detail.php  
   $jsScript = '<script src="path/to/dist/js/app.js"></script>';  
   $cssLink = '<link href="path/to/dist/css/app.css" rel="stylesheet">';  
   $this->getHeaderScripts()->add($jsScript);  
   $this->getHeaderCss()->add($cssLink);  
   
   echo '<div id="lead-widget"></div>';

3. Initialisieren Sie die Vue-App in `public/js/leadWidget.js`:

import { createApp } from 'vue';
import LeadWidget from '../../src/components/LeadWidget.vue';
createApp(LeadWidget).mount('#lead-widget');

---

Best Practices
- API-Sicherheit: Nutzen Sie **Tokens** statt Session-Cookies für API-Aufrufe.
- Caching: Speichern Sie häufig abgerufene Daten (z. B. Benutzerliste) in Vuex.
- Error-Handling: Fügen Sie `try/catch`-Blöcke für API-Requests hinzu.

Im Video zeige ich:
- Wie Sie die Vtiger-REST-API mit Vue.js nutzen.
- Dynamisches Filtern von Leads mit Vue-Computed-Properties.
- Debugging-Tipps für die Integration.

---

Warum Vue.js?
- Reaktivität: Änderungen an Daten spiegeln sich sofort in der UI wider.
- Modularität: Wiederverwendbare Komponenten sparen Entwicklungszeit.
- Performance: Vue.js ist leichtgewichtig und schnell.

---

Nächste Schritte:
- Teil 2: Erweitern Sie das Widget um Charts (z. B. mit Chart.js).
- Teil 3: Real-Time-Updates mit WebSockets.

---

„Mit Vue.js verwandeln Sie Vtiger in eine dynamische Plattform – wie ein Auto, das auf Knopfdruck vom Cabrio zum Geländewagen wird.“