# vue-typescript-inject

> Angular-like injector for Vue

Latest version **0.3.1** (published 2020-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-typescript-inject
pnpm add vue-typescript-inject
yarn add vue-typescript-inject
bun add vue-typescript-inject
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2020-09-08 |
| First published | 2017-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Maintainers | springnyan |
| Keywords | vue, typescript, inject |

## Links

- npm: https://www.npmjs.com/package/vue-typescript-inject
- Repository: https://github.com/SpringNyan/vue-typescript-inject
- Homepage: https://github.com/SpringNyan/vue-typescript-inject#readme
- Issues: https://github.com/SpringNyan/vue-typescript-inject/issues
- npm.io page: https://npm.io/package/vue-typescript-inject

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2020-09-08
- 0.3.0 — 2019-09-19
- 0.2.1 — 2018-04-27
- 0.2.0 — 2018-04-26
- 0.1.3 — 2017-12-18
- 0.1.2 — 2017-12-18
- 0.1.1 — 2017-12-03
- 0.0.3 — 2017-08-27
- 0.0.2 — 2017-08-26
- 0.0.1 — 2017-08-23

## README

# vue-typescript-inject

[![npm](https://img.shields.io/npm/v/vue-typescript-inject.svg)](https://www.npmjs.com/package/vue-typescript-inject)

Angular-like injector for Vue

## Requirements

[TypeScript](https://github.com/Microsoft/TypeScript) with `--experimentalDecorators` and `--emitDecoratorMetadata` flags

[reflect-metadata](https://github.com/rbuckton/reflect-metadata)

[vue-class-component](https://github.com/vuejs/vue-class-component)

## Usage

```typescript
import "reflect-metadata";

import Vue from "vue";
import Component from "vue-class-component";
import VueTypeScriptInject, { injectable, inject } from "vue-typescript-inject";

Vue.use(VueTypeScriptInject); // register vue-typescript-inject

@injectable() // identify service class
class ServiceA {
  public num = 0;

  public increase() {
    this.num += 1;
  }
}

@injectable() // identify service class
class ServiceB {
  constructor(private readonly _serviceA: ServiceA) {} // will be auto injected

  public get str() {
    return "" + this._serviceA.num;
  }
}

@Component({
  template: `
    <div>
      <span>{{ getNum() }}</span>
      <button @click="increase()">Increase</button>
    </div>
  `,
  providers: [ServiceA, ServiceB] // register service providers
})
class ComponentA extends Vue {
  @inject() private readonly _serviceA!: ServiceA; // same as @inject(ServiceA)
  @inject(ServiceB) private readonly _serviceB!: ServiceB;

  public increase() {
    this._serviceA.increase();
  }

  public getNum() {
    return this._serviceA.num;
  }

  public getStr() {
    return this._serviceB.str;
  }
}
```

For more example, see [test/test.ts](https://github.com/SpringNyan/vue-typescript-inject/blob/master/test/test.ts)

For references, see [Angular Dependency Injection](https://angular.io/guide/dependency-injection)

## License

MIT

---
_Source: https://npm.io/package/vue-typescript-inject · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._