DEV Community

Sadick
Sadick

Posted on • Originally published at Medium on

4 2

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

<template>
<div>
<h1>Hello World</h1>
</div>
</template>
<script>
export default {
name: 'hello-world'
}
</script>
view raw hello.vue hosted with ❤ by GitHub

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

import HelloWorld from './components/HelloWorld.vue'
export default {
install: function (Vue, options) {
Vue.component('hello-world', HelloWorld);
},
}
view raw index.js hosted with ❤ by GitHub

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

import Vue from 'vue'
import HelloWorld from 'helloworld'
Vue.use(HelloWorld) //hello-world is registered to the global scope
view raw import.js hosted with ❤ by GitHub

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'
Enter fullscreen mode Exit fullscreen mode

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

// How a user may choose to use your awesome component.
import Vue from 'vue'
import HelloWorld from 'helloworld'
Vue.use(HelloWorld) // If this component is going to be used in many places
//... in component
import { HelloWorld } from 'helloworld' // this is if he needs to use it only on one component
export default {
components: {
HelloWorld
}
}
view raw import.js hosted with ❤ by GitHub

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.

import HelloWorld from './components/HelloWorld.vue'
export default {
install: function (Vue, options) {
Vue.component('hello-world', HelloWorld);
},
}
// this line is what makes it possible for the user of the
// component to be able to use it in a local component if he needs to
export { HelloWorld }
view raw export.js hosted with ❤ by GitHub

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!

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay