Iniezione di un componente Vue

L’iniezione di un componente Vue è ideale quando vuoi estendere una pagina esistente che potrebbe non essere stata creata dal tuo modulo. Potresti, ad esempio, usare un componente Vue per:

• Creazione di una scheda per un componente CRUD o per un’impostazione
• Crea un campo di input personalizzato
• Crea un popup dinamico

Indipendentemente dal motivo, va sempre allo stesso modo. Devi rendere disponibile il tuo componente Vue per NexoPOS. È di questo che parleremo.

Iniettare un output globale nel piè di pagina della dashboard

A partire da NexoPOS 6x, ora facciamo affidamento sull’evento per iniettare un output. In effetti, ciò che accade è che, quando viene eseguito il rendering di una pagina, vengono dispatchati più eventi. Esiste un evento che si attiva quando viene eseguito il rendering dell’header e quando viene eseguito il rendering del footer. Useremo quindi questo ultimo per aggiungere il nostro output.

<?php
namespace Modules\YourModule\Listeners;

use App\Events\RenderFooterEvent;

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

Copia

Aggiunta di un componente Vue all’oggetto nsExtraComponents

Da questa visione globale, possiamo creare un tag script che carica un file js o un tag script in cui il componente Vue viene aggiunto all’oggetto nsExtraComponents.

Ecco come registrerai i componenti Vue 3 su NexoPOS 5x

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

Ora il componente viene aggiunto alla principale istanza Vue collegata a #dashboard-content. Per eseguire il rendering del componente, devi usare il tag che corrisponde alla chiave dell’oggetto aggiunto a nsExtraComponents, come questo:

<my-component></my-component>

Un vantaggio di questo è che tutti i componenti integrati disponibili a livello globale sono disponibili anche per il tuo componente personalizzato.