Vue: Injecting Component

NexoPOS from version 5x uses Vue 3 for all its components. For legacy purposes, we'll keep the guide relevant for NexoPOS 4x.

We'll take profit from this to register your own custom components. Assuming you have successfully created your custom page or crud component, we'll now see how you can register your custom Vue component.

How To Inject A Global Output On Dashboard Footer

If you want to inject an output that should appear on every single page of the dashboard footer, you'll need to use the filter "ns-dashboard-footer". Here is how you'll add your view concretely :

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 2 components on NexoPOS 4x :

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

Now the component is added to the main Vue instance that is attached to #dashboard-content.