TypeScript icon, indicating that this package has built-in type declarations

    0.0.12 • Public • Published


    IoC and DI for Vue with InversifyJS inspired by NestJS

    Node.js Package



    • vuex-module-decorators support using lazy injection via @LazyInject.
    • Services are accessible through Vue components.
    • Can inject a VuexStore if you want type-safety.


    $ npm install doguinho reflect-metadata inversify --save

    TypeScript Configuration

      "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true

    Getting started

    Creating application

    First, create an Doguinho instance.

    import { createDoguinho } from "doguinho";
    const doguinho = createDoguinho(options);

    You can pass several options during creation such as router and store if you want to define them in advance, and Doguinho will use them as the basis for defining things, if you do not provide, Doguinho will create its own.

    Add it to your Vue application

    import Vue from "vue";
    const vm = new Vue({ doguinho });

    Note: you must create Doguinho before building your application.


    Modules are closed injection environments and should be used to better organize your application.

    To define a new module simply add the decorator @Module on it.

    import { Module } from "doguinho";
    export default class MyModule {}

    Initialization handler

    In case you need to do something when the module starts, there are initialization handlers beforeInit and init for you to work on.

    import { Module, ModuleContext } from "doguinho";
        onInit(context: ModuleContext): void { /* ... */ }
    export default class MyModule {}

    You can use the current context to perform manual injection, or anything else.

    import { Module, ModuleContext } from "doguinho";
        beforeInit(context: ModuleContext): void {
    export default class MyModule {}

    Use keys to inject constant, dynamic, or function values.

    const HelloWorldKey = "hero";
        beforeInit(context: ModuleContext): void {
            context.injectConst("Hello world", HelloWorldKey);
    export default class MyModule {}

    Get values injected into the post-init handler.

    const InitKey = "hero";
        beforeInit(context: ModuleContext): void {
            context.injectConstant(`Module "${}" initialized!`, InitKey);
        init(context: ModuleContext): void {
            // prints: Module "auth" initialized
    export default class AuthModule {}


    Providers passed through modules are automatically injected in the context of that module.

    Only classes annotated with @Injectable can be providers.

    import { Module, Injectable } from "doguinho";
    export class SomeRandomService {}
        providers: [SomeRandomService]
    export default class MyModule {}

    Recommended project directory structure

    A recommended project structure using modules is the feature module which consists of a directory (with its own module) for each feature. Something like this:

    Source directory (/src)

    ├─ app/
    │  │  ├─ module-A/
    │  │  │  ├─ A.module.ts
    │  │  ├─ module-B/
    │  │  │  ├─ B.module.ts
    │  │  app.module
    │  │  App.vue
    │  ├─ main.ts


    Inject any type of instantiable class in the context of the module.
    Anything injected becomes singleton in the module context.

    When necessary, InversifyJS will instantiate the object and keep it available for other services.

    export class DogService {}

    Inject other services available in the module into your service constructor.

    export class CatsService {
      constructor(@Inject() private readonly dogsService: DogsService) {}
    doguinho.inject(DogsService, CatsService);

    It is often not possible for InversifyJS to instantiate the object being injected, for example: Vue components or Vuex stores.

    Considering that there is no specific order of startup and that we do not know what will or will not be available or when, we created the lazy injection.

    Lazy Injection

    Make a note of a property so that it becomes a getter which, when requested, will get the result late.

    export class Somewhere {
      @Inject() private readonly dogsService!: DogsService

    Note: providers are searched for in their own module and then in the global context if they are not found.

    Using with vuex-module-decorators

    export default class DogsStore extends VuexModule {
      @Inject() private readonly dogsService!: DogsService;
      public async createDog(name: string): Promise<Dog> {
          // do something with DogsService

    You can inject the store so that it will be available anywhere in the scope of that module.


    Using with vue-class-component

    export default class SomeComponent extends Vue {
      @Inject() private readonly dogsStore!: DogsStore;
      /* ... do something wih DogsStore */


    npm i doguinho

    DownloadsWeekly Downloads






    Unpacked Size

    25.1 kB

    Total Files


    Last publish


    • devnatan