Injecting Vue Component

Injecting a Vue component is ideal when you want to extend an existing page that might not be created by your module. You might, for example, use a Vue component for :

Creating a tab for a Crud component or setting
Create a custom form input
Create a dynamic Popup

Regardless of the reason, it all goes the same way. You have to make your Vue component available to NexoPOS. That's what we'll cover.

Injecting A Global Output On Dashboard Footer

From NexoPOS 6x, we now rely on the event to inject an output. In fact, what happens is that when a page is rendered, multiple events are dispatched. There is an event that triggers when the header is rendered and when the footer is rendered. We'll then use this latest to add our output.

<?php
namespace Modules\YourModule\Listeners;

use App\Events\RenderFooterEvent;

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

Copy

Adding A Vue Component To nsExtraComponents Object

From that global view, we can create a script tag that loads a js file or a script tag where the Vue component is added to the nsExtraComponents object.

Here is how you'll register Vue 3 components on NexoPOS 5x

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

Now the component is added to the main Vue instance that is attached to #dashboard-content. To render the component, you need to use the tag that matches the key of the object added to nsExtraComponents, like this:

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

One advantage of this is that all the built-in components that are globally available are also available for your custom component.