# Vue

# 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:

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

<p class="callout info">Replace `aerocargo/acme` with your module vendor &amp; name.</p>

<p class="callout info">After defining asset links, you will need to run `php artisan aero:link`.</p>

#### Initialise components

```javascript
// resources/js/components.js

import NewComponent from './components/NewComponent;

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

<p class="callout info">The above code gives us access to the `<new-component></new-component>` tag, provided we’ve loaded the components into a view.</p>

#### Loading components into a view

```html
@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:

```javascript
import NewComponent from './components/NewComponent;

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