Vue Injector

# Getting Started

Required

ECMAScript stage 1 decorators. If you use Babel, @babel/plugin-proposal-decorators is needed. If you use TypeScript, enable --experimentalDecorators and --emitDecoratorMetadata flags.

Vue-injector requires a modern JavaScript engine with support for:

If your environment doesn't support one of these you will need to import a shim or polyfill .

Required

The reflect polyfill should be imported only once in your entire application because the Reflect object is meant to be a global singleton.

Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details here. :::

Using DI with Vue Injector is dead simple. Here’s a basic example:

# HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@scandltd/vue-injector/dist/vue-injector.js"></script>

<div id="app">
  <h1>First Application!</h1>
  <p>
    <!-- the registered component is to be illustrated here -->
    <logger/>
  </p>
</div>

# JavaScript

// 0. When using modular system (for ex. through vue-cli),
//  import Vue and VueInjector and then call `Vue.use(VueInjector)`.

// 1. Construct injector instance
// new VueInjector({ store, root: [Service] })
const injector = new VueInjector()

// 2. Construct and mount an application’s root instance.
// Make sure you transferred the instance of the plugin using the option
// `injector`, so the application accommodates its existence.
const app = new Vue({
  injector
}).$mount('#app')

// Your application works! ;)

Now you can construct services and inject them into components of the application.

import { Injectable, Inject } from '@scandltd/vue-injector'

// Register a new service
@Injectable
class LogService extends Inject {}

<template>
    // Enter the name of the service
    {{ LogService.name }}
</template>

import LogService from 'logger'

// Inject dependency into the component.
Vue.component('logger', {
  name: 'logger',
  providers: {
    LogService
  }
})

By incorporating the injector, we ensure its accessibility through this.$injector, as well as ensure accessibility of the injected services within any component through this.<ServiceName>:

// Home.vue
export default {
  computed: {
    logger () {
      // Soon we'll discuss the `get` purpose
      return this.$injector.get(LogService)
    }
  }
}

In documentation, we’ll often refer to injector instance. Note that this.$injectoris still the same injector.

← Service Registration →