How do I register a custom Vue component for my module?

To register a Vue component for our module, we will need to create a JavaScript file for our components and in order to initialise Vue.

Link assets

In order to link all the assets, which is a necessary step of registering a Vue component, we need to add a function to the module Service Provider. This is the code we need in the service provider:

public function assetLinks()   
{   
     return [   
         'aerocargo/acme' => __DIR__ . '/../public',   
     ];   
}

Replace aerocargo/acme with your module vendor & name.

After defining asset links, you will need to run php artisan aero:link.

Initialise components

// resources/js/components.js

import NewComponent from './components/NewComponent;

window.Acme = {
    install(Vue) {
        Vue.component('new-component', NewComponent);
    },
}

The above code gives us access to the <new-component></new-component> tag, provided we’ve loaded the components into a view.

Loading components into a view

@push('scripts')
    <script src="{{ asset(mix(components.js', 'modules/aerocargo/acme')) }}"></script>
    <script>
        window.AeroAdmin.vue.use(window.Acme);
    </script>
@endpush

Enable Vue dev tools

In order to enable Vue devtools for our module, we simply add the following line of code into the file where we initialize our components:

import NewComponent from './components/NewComponent;

window.Acme = {
    install(Vue) {
        Vue.config.devtools = true;
      
        Vue.component('new-component', NewComponent);
    },
}