Vue DIOD
Dependency Injection in Vue.js thanks to DIOD library.
Documentation & Examples | DIOD on GitHub
About
As stated by its author on GitHub, DIOD is:
A very opinionated and lightweight (under 2kB minified and gzipped) inversion of control container and dependency injector for Node.js or browser apps. It is available for vanilla Javascript usage but its true power will be shown by building Typescript apps.
Vue DIOD is made on top of DIOD and helps avoiding SOLID principles violations in Vue 3 applications. It allows to configure dependencies at the app level and / or at component level, without children knowing abour the actual implementations.
Basically, it wraps DIOD functionalities in a plugin which uses Vue's provide
method to make dependencies available to subtree components, by calling inject
with the registered abstract class as key.
It also provides its builder for bootstrapping dependencies at component level, and a composable which main purpose is helping with injection key typings.
Quick example (with plugin)
Define abstraction
export abstract class AbstractCounter {
increment(value: number): number;
decrement(value: number): number;
}
Create implementation
export class Counter implements AbstractCounter {
public increment(value: number): number {
return value + 1;
}
public decrement(value: number): number {
return value - 1;
}
}
Bootstrap dependency container
In your main.ts
file, for example.
import('reflect-metadata');
// ...
app.use(VueDiod, {
injectables: [{ register: AbstractCounter, use: Counter }],
});
// ...
Inject in component
Without helper
NB: Keeping your application decoupled from Vue DIOD.
In the component's <script setup>
.
// ...
import type { InjectionKey } from 'vue';
import { inject } from 'vue';
const Key = AbstractCounter as unknown;
const counter = inject<() => AbstractCounter>(
Key as InjectionKey<AbstractCounter>
/* Optional fallback */
);
const increment = counter.increment.bind(counter);
const decrement = counter.decrement.bind(counter);
// ...
<template>
<!-- Use in your template -->
</template>
With Vue DIOD helper
// ...
import { useVueDiod } from 'vue-diod';
const { injectServiceInstance } = useVueDiod();
const counter = injectServiceInstance<AbstractCounter>(
AbstractCounter
/* Optional fallback */
);
const increment = counter.increment.bind(counter);
const decrement = counter.decrement.bind(counter);
// ...
For other examples, please check the documentation that provides an example for bootstrapping the container at component level, and demonstrate DIOD's powerful autowire
for constructor's dependencies.
Install
Install dependencies
Considering you already have a working Vue 3 project, you'll have
to install Vue DIOD with its dependencies:
reflect-metadata
and obviously diod
.
npm
npm install -s vue-diod diod reflect-metadata
yarn
yarn add vue-diod diod reflect-metadata
Typescript configuration
Modify your tsconfig.json
to include the following settings:
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
Vite configuration
As stated in the Vite GitHub issues (here):
The emitDecoratorMetadata flag is intentionally not supported.
To enable this support, we have to disable esbuild and use SWC instead, thanks
to the
rollup-plugin-swc3
package.
npm install --save-dev @swc/core rollup-plugin-swc3
# OR
yarn add -D @swc/core rollup-plugin-swc3
Then, in our vite.config.js
or vite.config.ts
file, we simply have to add:
import { defineConfig } from 'vite';
import swc from 'rollup-plugin-swc3';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
// ...
plugins: [
swc({
jsc: {
parser: {
syntax: 'typescript',
dynamicImport: true,
decorators: true,
},
target: 'es2021',
transform: {
decoratorMetadata: true,
},
},
}),
vue(),
],
esbuild: false,
});
TODO
- [ ] Tests
- [ ] Improve documentation
- [ ] Complete examples in the monorepo packages