Publish vue components like this.

First of all big up to those who develop and publish vue components. You make work very easy and simple for us. Most components are just an npm install away.

However I would like to draw your attention to one small aspect of exporting components. Lets look at how we normally expose components to be publishable. Assuming we have a hello world component

Lets expose it to be the outside world so that we can publish to npm

With this when someone installs your vue component he/she has to import it and register it to the global scope.

This approach is okay if the component is going to be used in many places of the application. If not it would be polluting the global scope. But if someone using your component wants to use it on a local component once he has to resort to importing it like this

import HelloWorld from 'helloworld/src/components/HelloWorld.vue'

Which is not really ideal and not straight forward. The best practice would be to provide the user a way to both import it globally and locally at the same time with minimal effort. Not having to deal with the internal structure of your application.

The ideal imports should be

To achieve this there is only one line you need to add. One that is being neglected by most component developers.

When you export your component please remember to include this line.

If this post was helpful please share it and stay tuned for my other articles. You can follow me on GitHub and LinkedIn. If you have any ideas and improvements feel free to share them with me.

Happy coding!