Vue: Injecting 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

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 3 components on NexoPOS 5x

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:

<my-component></my-component>

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