Inyectando un componente de Vue

Inyectar un componente de Vue es ideal cuando quieres ampliar una página existente que quizá no haya sido creada por tu módulo. Por ejemplo, podrías usar un componente de Vue para:

Creando una pestaña para un componente CRUD o una configuración
Crea un campo de formulario personalizado
Crea una ventana emergente dinámica

Independientemente del motivo, todo sigue el mismo camino. Tienes que poner tu componente de Vue a disposición de NexoPOS. Eso es lo que veremos.

Inyectar una salida global en el pie de página del panel

A partir de NexoPOS 6x, ahora dependemos del evento para inyectar una salida. De hecho, lo que sucede es que, cuando se renderiza una página, se envían varios eventos. Hay un evento que se activa cuando se renderiza el encabezado y cuando se renderiza el pie de página. Luego usaremos esta última información para agregar nuestra salida.

<?php
namespace Modules\YourModule\Listeners;

use App\Events\RenderFooterEvent;

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

Copiar

Agregar un componente de Vue al objeto nsExtraComponents

Desde esa perspectiva global, podemos crear una etiqueta de script que cargue un archivo js o una etiqueta de script donde el componente de Vue se agregue al objeto nsExtraComponents.

Así es como registrarás componentes de Vue 3 en NexoPOS 5x

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

Ahora el componente se agrega a la instancia principal de Vue que está adjunta a #dashboard-content. Para renderizar el componente, necesitas usar la etiqueta que coincida con la clave del objeto agregado a nsExtraComponents, así:

&lt;my-component&gt;&lt;/my-component&gt;

Una ventaja de esto es que todos los componentes integrados que están disponibles globalmente también están disponibles para tu componente personalizado.