A basic and simple dependency injector with no dependencies.

Usage no npm install needed!

<script type="module">
  import cherrypulpDependencyInjector from 'https://cdn.skypack.dev/@cherrypulp/dependency-injector';



codebeat badge Issues License npm version

A basic and simple dependency injector with no dependencies.

Why use dependency injection?

You might by now be thinking "hey that's pretty cool, but why would I do that?". There's a couple reasons why you might want to use dependency injection in VueJS


Imagine you're writing an application that makes calls to an API, you're probably using a package for making those HTTP requests. However, when you're running your unit tests you'd probably rather not have those tests run wild and create 200 users in your API. Using dependency injection you could just swap out the binding for your HTTP service with a dummy service (that could for example assert the required calls are made), without having to change a single line of code.


import axios from 'axios';

deps.singleton('$http', axios);

Then for your unit tests

deps.singleton('$http', DummyHttpService);

Explicit dependencies


Easier refactoring



Installing using npm install @cherrypulp/dependency-injector?

WARNING Look at this before building for production.

Quick start


import DependencyInjector from '@cherrypulp/dependency-injector';

const deps = new DependencyInjector();

deps.constant('foo', 'BAR');
deps.register('bar', (key) => key);
deps.singleton('api', ApiService);

// then

deps.resolve('foo'); // return 'BAR'
deps.resolve('bar')('ok'); // return 'ok'
deps.resolve('api'); // return Api service

Resolve parameters

function func(foo, api) {
    /* ... */

const params = deps.parameters(func); // return ['BAR', ApiService]

Patch method

WARNING Look at this before building for production.

const func = deps.patch(function (foo, api) {
    // foo === 'BAR'
    // api === ApiService


import VueDependencyInjector from 'dependency-injector/vue-dependency-injector';

const options = {
    constants: {
        foo: 'BAR',
    factories: {
        bar: (key) => { ... },
    services: {
        api: Api,

Vue.use(VueDependencyInjector, options);

// or

new Vue({
    el: '#app',

// then

this.$dependency.constant('foo'); // return 'BAR';
this.$dependency.factory('bar')(key); // use bar factory
this.$dependency.service('api'); // return Api service;



When building for production you'll most likely minify your code. Most minifiers employ a technique called "name mangling" which poses a couple problems with this library if you use method injection. You can read more about this here.

In short, you'll need to ensure your minifier won't mangle the parameter names of your services, for UglifyJS (default for webpack) this can be done like this:

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    sourceMap: true,
    mangle: {
        except: ['Service'], // blacklist your services from being mangled


Versioned using SemVer.


Please raise an issue if you find any. Pull requests are welcome!



This project is licensed under the MIT License - see the LICENSE file for details.


  • Documentation
  • VueX integration
  • Unit tests
  • use Map instead of Object for $dependencies
  • ability to freeze values
  • ability to cache values