Vue Injector — Dependency Injection Library for Vue.js

Vue Injector is an open-source dependency injection library for Vue.js that was developed by SCAND team. The library includes a number of instances which can be used for the implementation of the dependency injection pattern.

Dependencies are services or objects that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself, and Vue Injector provides the ability to inject dependencies into a component at the moment of its creation. The library can be used for the development of flexible, efficient, and robust applications that will be easier to test and maintain in the future.

There is a detailed description of the installation process of Vue Injector and the ways it can be used for different purposes, including specification of dependencies for Vue.js components, integration of components, injection of properties into components, etc. Read the documentation to learn all the details.

Main Features

Vue Injector includes the following:

  • Dependency injection for components.
  • Construction of the injected services.
  • Accessibility of Vue application from a service.
  • Utilization of decorators for convenient operation.

Pros Of Using Vue Injector

Vue Injector provides some significant benefits that can often be achieved unconsciously, simply by using the initializer-based dependency injection for all objects. The main benefits of the library are the following:

  • Provides developers with the ability to utilize dependency injection — an important design pattern that is not included in Vue.js framework by default.
  • Provides convenient mechanism of data transfer.
  • Allows creating both a service and a service factory.
  • Allows requesting the service instead of creating it, providing the ability to depend on interfaces rather than concrete types.
  • Provides the ability to implement event bus.
  • Promotes application’s flexibility, efficiency, and robustness.
  • Allows creating easily testable and maintainable applications.

Vue Injector Code Example

import Vue from 'vue';
import VueInjector, { Injectable, Inject } from '@scandltd/vue-injector';

Vue.use(VueInjector);

@Injectable
class Logger {
    @Inject(Vue) vm;

    /* Development environment */
    isDev = true;

    constructor() {
        Vue.config.devtools = this.isDev;
        Vue.config.errorHandler = this.errorHandler;
        Vue.config.warnHandler = this.warnHandler;
    }

    errorHandler(err, vm, info) {
        console.error(err);
        /* ... */
        this.sendLogs(err, vm, info);
    }

    warnHandler(msg, vm, trace) {
        console.warn(msg);
        /* ... */
        this.sendLogs(msg, vm, trace);
    }

    sendLogs() {
        /* ... */
    }
}

const injector = new VueInjector({ root: [Logger] });

new Vue({
    el: '#app',
    injector
});

Support

Browse
Attachment: filename ×

Thank you for your interest in our products! We have received your message and will reply to you as soon as possible. Please check your mailbox for a confirmation letter from us.