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:

<template>
    <div>
        <h1>{{title}}</h1>
        <router-link to="/form">Go to Form</router-link>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">

import Vue from "vue";
import {Component} from "vue-di-kit";
@Component()
export default class AppComponent extends Vue {
    public title: string = "My App";
}

</script>

assume that form.component.vue looks like:

<template>
    <form>
        <label>First Name</label>
        <input type="text" v-model="firstName">
        <br/>
        <label>Last Name</label>
        <input type="text" v-model="lastName">
        <br/>
        <label>Email Address</label>
        <label>{{email}}</label>
    </form>
</template>

<script lang="ts">

import Vue from "vue";
import {Component, Prop, Compute, Routing} from "vue-di-kit";

@Routing('/form')
@Component()
export default class FormComponent extends Vue {
    @Prop({required: true})
    private lastName: string = 'Last';
    @Prop({required: true})
    public firstName: string = 'First';

    @Compute()
    public get email(): string {
        return this.toLowerCase(`${this.firstName}.${this.lastName}@email.com`);
    }

    public toLowerCase(value: string): string{
        return value.toLowerCase();
    }
}

</script>

and assume that main.ts will be used as the webpack entry module and looks like:

import Vue from "vue";
import VueRouter from "vue-router";
import { routes } from "vue-di-kit";
Vue.use(VueRouter);
Vue.config.devtools = true;
const router = new VueRouter({routes, mode: 'history'})

let app = new Vue({
    el: '#app',
    data: { name: 'Vue DI Template'},
    template: `
    <div>
        <app-component />
    </div>
    `,
    router
});

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:

import Vue from "vue";
import { routes } from "vue-di-kit";
import VueRouter from "vue-router";
import AppComponent from "./components/app.component.vue";
import FormComponent from "./components/form.component.vue";

Vue.use(VueRouter);
Vue.config.devtools = true;
const router = new VueRouter({routes, mode: 'history'})

let app = new Vue({
    el: '#app',
    data: { name: 'Vue DI Template'},
    template: `
    <div>
        <app-component />
    </div>
    `,
    router
    ,
    components: {
        'app-component': AppComponent,
        'form-component': FormComponent
    }
});

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.