# vue-dep-inject
> Dependency injection in Vue
Latest version **1.2.2** (published 2018-08-12) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install vue-dep-inject
pnpm add vue-dep-inject
yarn add vue-dep-inject
bun add vue-dep-inject
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.2.2 |
| Published | 2018-08-12 |
| First published | 2018-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8.9.0 |
| Dependencies | 0 |
| Unpacked size | 155.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Furrya Black |
| Maintainers | furrya |
| Keywords | vue, vue-library, dependency-injection |
## Links
- npm: https://www.npmjs.com/package/vue-dep-inject
- Repository: https://github.com/furryablack/vue-dep-inject
- Homepage: https://github.com/furryablack/vue-dep-inject#readme
- Issues: https://github.com/furryablack/vue-dep-inject/issues
- npm.io page: https://npm.io/package/vue-dep-inject
## Recent versions
- 1.2.2 (latest) — 2018-08-12
- 1.2.1 — 2018-08-12
- 1.2.0 — 2018-07-15
- 1.1.0 — 2018-06-26
## README
# vue-dep-inject
[](https://github.com/semantic-release/semantic-release)
[](https://travis-ci.org/furryablack/vue-dep-inject)
Dependency injection in Vue
> provide dependency injection as in angular 2+ (aka DI)
## Installation
```
npm install vue-dep-inject
```
or
```
yarn add vue-dep-inject
```
**vue-dep-inject** can be used as a module in both CommonJS and ES modular environments.
When in non-modular environment, **vue-dep-inject** will register to vue by itself.
### ES6
```js
import VueDI from 'vue-dep-inject';
Vue.use(VueDI);
```
### CommonJS
```js
var Vue = require('vue');
var VueDI = require('vue-dep-inject');
Vue.use(VueDI);
```
### Browser
```html
```
### Use it
```js
import VueDI from 'vue-dep-inject';
/*
Note one:
FactoryData is object:
{
provide: some class/function,
factory: function that will have to return instance of provider,
depProviders: provider[], where provider is some class/function (FactoryData.provider)
}
Note two:
VueDI contains Injector with methods:
.get(p: *some class/function declared in FactoryData.provide* or provider.providerName),
.set(p: FactoryData | FactoryData[]),
.has(p: *some class/function declared in FactoryData.provide* or provider.providerName)
Also you can use short aliases:
VueDI.Injector.has === VueDI.has
VueDI.Injector.get === VueDI.get
VueDI.Injector.set === VueDI.set
*/
/*
Step 1
Declare factories: FactoryData[]
*/
const factories = [
{
provide: EnvProvider,
factory: function factory() {
return new EnvProvider(process.env);
}
},
{
provide: DocumentProvider
},
{
provide: DocumentTitleProvider,
factory: function factory(envProvider, documentProvider) {
return new DocumentTitleProvider(
envProvider,
documentProvider,
{ some: 'payload' }
);
},
depProviders: [EnvProvider, DocumentProvider]
}
];
/*
Step 2
Setup factories with .set(factories: FactoryData | FactoryData[])
*/
VueDI.Injector.set(factories);
/*
Step 3
Resolve your providers anywhere you want
*/
// In custom modules, in Vuex subscribes as example
const docTitleProvider = VueDI.get(DocumentTitleProvider);
// In Vue components (will be resolved in beforeCreate hook)
const SomeComponent = {
// DocumentTitleProvider.providerName === 'documentTitleProvider'
inject: [
DocumentTitleProvider.providerName
],
created() {
console.log({
DocumentTitleProvider: this.documentTitleProvider
});
},
}
```
Where:
- EnvProvider
```js
import has from 'lodash-es/has';
export class EnvProvider {
env = {};
constructor(env) {
this.env = env;
}
get isDevelopment() {
return this.get('NODE_ENV') === 'development';
}
get(key) {
const { env } = this;
const vuePrefixedKey = `VUE_${key}`;
const defaultKey = `${key}`;
if (has(env, vuePrefixedKey)) {
return this.env[vuePrefixedKey];
}
if (has(env, defaultKey)) {
return this.env[defaultKey];
}
return key;
}
static get providerName() {
return 'envProvider';
}
}
```
- DocumentProvider
```js
const d = document;
export class DocumentProvider {
get document() {
return d;
}
static get providerName() {
return 'documentProvider';
}
}
```
- DocumentTitleProvider
```js
import isEmpty from 'lodash-es/isEmpty';
import trim from 'lodash-es/trim';
const noEmpty = _ => !isEmpty(_);
export class DocumentTitleProvider {
titles = {};
constructor(envProvider, documentProvider, somePayload = {}) {
this.envProvider = envProvider;
this.documentProvider = documentProvider;
}
get compliment() {
return trim(this.envProvider.get('APP_NAME'));
}
get subDelimiter() {
return ` ${trim(this.envProvider.get('APP_DOCUMENT_TITLE_SUB_DELIMITER'))} `;
}
get mainDelimiter() {
return ` ${trim(this.envProvider.get('APP_DOCUMENT_TITLE_MAIN_DELIMITER'))} `;
}
update(titles) {
this.titles = { ...this.titles, ...titles };
const { main, sub } = this.titles;
const { document } = this.documentProvider;
document.title = [
[main, sub]
.filter(noEmpty)
.join(this.mainDelimiter), this.compliment
].filter(noEmpty).join(this.subDelimiter);
}
static get providerName() {
return 'documentTitleProvider';
}
}
```
### Conclusions
- One provider - one provider instance
- Provider must contains constructor and static property .providerName: string
- In component provider will be resolved in beforeCreate hook
### Changelog
See the GitHub [release history](https://github.com/furryablack/vue-dep-inject/releases).
---
_Source: https://npm.io/package/vue-dep-inject · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._