@fluffy spoon/inverse vue

`@fluffy-spoon/inverse-vue` is a Vue.js plugin that allows constructor dependency injection using the [`@fluffy-spoon/inverse`](https://www.npmjs.com/package/@fluffy-spoon/inverse-vue) framework.

Version: 1.15.0 Updated: 04/16/2019

By: ffmathy License: ISC

Downloads Last 30 Days: 77

Install

npm i @fluffy-spoon/inverse-vue
yarn add @fluffy-spoon/inverse-vue

CDNs

bundle.run: https://bundle.run/@fluffy-spoon/inverse-vue

jsDelivr: https://cdn.jsdelivr.net/npm/@fluffy-spoon/inverse-vue

unpkg: https://unpkg.com/@fluffy-spoon/inverse-vue

@fluffy-spoon/inverse-vue is a Vue.js plugin that allows constructor dependency injection using the @fluffy-spoon/inverse framework.

Installing

npm i @fluffy-spoon/inverse-vue --save

Example

To understand the following example, you have to be familiar with @fluffy-spoon/inverse first.

In the example below, we provide the plugin with the IOC container we want to use and define a component called MyVueComponent which injects a Foo as a dependency automatically.

import { Container, Inject, Injectable } from '@fluffy-spoon/inverse';
import { VueInverse, VueInjectable } from '@fluffy-spoon/inverse-vue';

import Component from 'vue-class-component';
import Vue from 'vue';

var container = new Container();
Vue.use(VueInverse, container);

@Injectable
class Foo { }

@Component({
    template: '<div></div>'
})
@VueInjectable
class MyVueComponent extends Vue {
    constructor(
        @Inject private foo: Foo) 
    {
        super();  

        console.log('foo is injected - look:', foo);
    }
}

Now if you provide MyVueComponent to Vue.js anywhere, it will always have its constructor parameters injected in.

Special notes

@fluffy-spoon/inverse-vue does not support classes that extend from mixins.

Categories: Vue js
Tags: