Best Practice for using services in a shared component


In AngluarJS I used to write my shared components so that the services they used (i.e. some ajax-lib) were injected and therefore exchangable from the outside.

In vue-js I always see field imports in the component’s scripts. And sometimes I see the arguments those imported modules might take being delegated by the components props.

I was wondering if this is best practice or maybe there are concepts how to pass in services to a component (i.e. passing a complete function in as a prop).

I avoided using the term DI on purpose, since that is not necessarily what I am aiming at.


I dont think its a good practice to pass function as a prop. If you need to share service, perhaps you could use mixins to modularize your service and reuse it on different components.


You don’t need to use dependency injection if you have webpack. You can just import whatever shared service you want to use.


Actually, there’s nothing wrong with this, and in certain cases it’s the only way to do things.

Vue Smooth DnD allows you to pass handler functions to its containers to customise drag and drop behaviour.

Scoped slots are another way to tackle this problem, but maybe not so suitable for self-contained services.


I’m not sure we’re talking the same thing.

I explicitly don’t want to import dependencies to my component so that anybody using my component as third party is able to provide alternative implmentations of the service that my prop is using.