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.

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
});

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.

Need Vue.js Project Development?

Why Scand

  • SCAND Skilled Engineers

    Our Front-end department is built up with over 170+ experienced JavaScript developers
  • SCAND Significant Experience

    We have successfully developed 50+ Web Projects
  • SCAND Security Confirmation

    We work under the NDA and ISO 27001 information security management standard
  • SCAND Deadlines Respectability

    Meeting the project deadline is the Golden Rule of our company
  • SCAND Support Policy

    We provide full-scale maintenance and support to keep our customers satisfied
  • SCAND Cost-Effective Solutions

    Affordable hourly rates in Eastern European region guarantee great ROI

Contact us

Thank you for your interest in our services. We have received your message and will respond to you shortly. Please check your mailbox for a confirmation letter from us.