Vue Dependency Injection Webpack Loader
A Webpack loader the automatically injects child components into apps and parent components during webpack compiling/transpiling.
vue-di-loader
works with single file components (SFC) that have their script sections written in TypeScript. By scanning the template section for component tags and then injects them into the code and transpiles them in to javascript during the webpack loading process.
This simplifies the web development process, and leaves code more elegant.
For example, assume you have a project structure as below:
src/
assets/
components/
app.component.vue
form.component.vue
main.html
main.ts
assume that app.component.vue
looks like:
{{title}} Go to Form
;;
assume that form.component.vue
looks like:
First Name Last Name Email Address {{email}}
;;
and assume that main.ts
will be used as the webpack entry module and looks like:
;;;Vue.useVueRouter;Vue.config.devtools = true; ;
notice that normally, when using the standard vue-loader and ts-loader, the above setup would not work.
The main.ts
file does no imports for the SFC defined in the components/
sub-directory. Therfore, webpack has no way to know that it needs to pull the app.component.vue
and the form.component.vue
files and inject them in its process.
However, thanks to the capabilities introduced by vu-di-kit and vue-di-loader, the necessary injections are done during webpack compilation.
The vue-di-loader can be instructed to search for all the SFC in the components/
sub-directory and inject them into the chunk pulled from main.ts
before passing to ts-loader for transpilation.
Hence the chunk coming from vue-di-loader to ts-loader will look as follows:
;;;;; Vue.useVueRouter;Vue.config.devtools = true; ;
as can be seen from above, vue-di-loader has imported both single file components, and added them into the existing Vue object construction.
The vu-di-kit framework kicks in after transpilation to javascript. The @Component
decorator will transform the classes defined in the SFC files into actual Vue components. The @Routing
decorators will inject route definitions into global routes
array in the vu-di-kit module
Installation
Do the following steps to install vue-di-loader:
npm install vue-di-loader
Documentation
Please see the Github Pages for more details.