Injetando um Componente Vue

Injetar um componente Vue é ideal quando você deseja estender uma página existente que talvez não tenha sido criada pelo seu módulo. Por exemplo, você pode usar um componente Vue para:

• Criando uma guia para um componente CRUD ou uma configuração
• Criar um campo de formulário personalizado
• Criar um Pop-up dinâmico

Independentemente do motivo, tudo segue o mesmo caminho. Você precisa disponibilizar seu componente Vue para o NexoPOS. É isso que vamos abordar.

Injetando uma saída global no rodapé do painel

A partir do NexoPOS 6x, agora dependemos do evento para injetar uma saída. Na verdade, o que acontece é que, quando uma página é renderizada, vários eventos são disparados. Existe um evento que é acionado quando o cabeçalho é renderizado e outro quando o rodapé é renderizado. Em seguida, usaremos essa versão mais recente para adicionar nossa saída.

<?php
namespace Modules\YourModule\Listeners;

use App\Events\RenderFooterEvent;

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

Copiar

Adicionando um Componente Vue ao Objeto nsExtraComponents

A partir dessa visão global, podemos criar uma tag de script que carregue um arquivo js ou uma tag de script em que o componente Vue seja adicionado ao objeto nsExtraComponents.

Veja como você registrará componentes Vue 3 no NexoPOS 5x

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

Agora, o componente é adicionado à instância principal do Vue que está anexada a #dashboard-content. Para renderizar o componente, você precisa usar a tag que corresponde à chave do objeto adicionado a nsExtraComponents, assim:

<my-component></my-component>

Uma vantagem disso é que todos os componentes internos que estão globalmente disponíveis também ficam disponíveis para o seu componente personalizado.