https://github.com/ffmathy/fluffyspoon.javascript.inversionofcontrol.vue
https://github.com/ffmathy/fluffyspoon.javascript.inversionofcontrol.vue
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ffmathy/fluffyspoon.javascript.inversionofcontrol.vue
- Owner: ffMathy
- Created: 2018-08-24T14:48:22.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-18T06:44:33.000Z (over 1 year ago)
- Last Synced: 2025-04-11T06:35:19.923Z (about 1 year ago)
- Language: TypeScript
- Size: 162 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
`@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.
# Installing
`npm i @fluffy-spoon/inverse-vue --save`
# Example
_To understand the following example, you have to be familiar with [`@fluffy-spoon/inverse`](https://www.npmjs.com/package/@fluffy-spoon/inverse-vue) 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.
```typescript
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: '
'
})
@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.