Injection de composant Vue

L’injection d’un composant Vue est idéale lorsque vous souhaitez étendre une page existante qui n’a peut-être pas été créée par votre module. Vous pourriez, par exemple, utiliser un composant Vue pour :

• Créer un onglet pour un composant CRUD ou pour un paramètre
• Créer un champ de formulaire personnalisé
• Créer une fenêtre contextuelle dynamique

Quelle que soit la raison, tout se déroule de la même manière. Vous devez rendre votre composant Vue disponible pour NexoPOS. C’est ce que nous allons voir.

Injection d’une sortie globale dans le pied de page du tableau de bord

À partir de NexoPOS 6x, nous nous appuyons désormais sur l’événement pour injecter une sortie. En effet, ce qui se passe, c’est que lorsqu’une page est rendue, plusieurs événements sont déclenchés. Il y a un événement qui se déclenche lorsque l’en-tête est rendu et lorsque le pied de page est rendu. Nous utiliserons ensuite cette dernière version pour ajouter notre sortie.

<?php
namespace Modules\YourModule\Listeners;

use App\Events\RenderFooterEvent;

class RenderFooterEventListener
{
    function handle( RenderFooterEvent $event ) {
         $event->output->addView( 'YourModule::path.to.file' )
    }
}

Copier

Ajout d’un composant Vue à l’objet nsExtraComponents

À partir de cette vue globale, nous pouvons créer une balise de script qui charge un fichier js, ou une balise de script dans laquelle le composant Vue est ajouté à l’objet nsExtraComponents.

Voici comment enregistrer des composants Vue 3 sur NexoPOS 5x

<script type="module">
nsExtraComponents[ 'my-component' ]   =   defineComponent({
    template  : `<h1>Hello World</h1>`,
    mounted() {
      console.log( 'the component is mounted' )
    }
});
</script>

Maintenant, le composant est ajouté à l’instance Vue principale qui est attachée à #dashboard-content. Pour rendre le composant, vous devez utiliser la balise qui correspond à la clé de l’objet ajouté à nsExtraComponents, comme ceci :

<my-component></my-component>

Un avantage de cela est que tous les composants intégrés disponibles globalement sont également disponibles pour votre composant personnalisé.