# How do I add a custom Vue component to the admin?

1. You need to add the `assetLinks` function to your modules service provider so that your modules assets are publicly linkable. An example module service provider can be found here:   
      
    [https://github.com/aerocargo/admin-example-vue/blob/master/src/ServiceProvider.php](https://github.com/aerocargo/admin-example-vue/blob/master/src/ServiceProvider.php)
2. You also need to make your component `.vue` file(s) and your `main.js` file that will register all of the components. An example javascript structure can be found here:  
      
    [https://github.com/aerocargo/admin-example-vue/tree/master/resources/js](https://github.com/aerocargo/admin-example-vue/tree/master/resources/js)
3. You need to run `php artisan aero:link` in your terminal to link the assets.
4. Once you’ve got your files setup, have ran the link command and have built the javascript files (using npm: `npm run dev` or `npm run production`), you need to ensure that your module's components javascript file is loaded and the components are registered in the Blade view where you want to use the component(s).  
      
    To do this you need to include the javascript file from your module and then register the components through the `window.AeroAdmin.vue.use` method:  
      
    ```html
    @push('scripts')
       <script src="{{ asset(mix('components.js', 'modules/aerocargo/admin-example-vue')) }}"></script>
       <script>
           window.AeroAdmin.vue.use(window.exampleAdminComponents);
       </script>
    @endpush
    ```
    
    After this you’ll be able to use your custom Vue component(s) anywhere in the Blade file where you have registered them.