Unfortunately, out of the box, Vue doesn't provide much support for dependency injection in its current version.

However, Vue does include two options: provide and inject. They are described in the official documentation (https://vuejs.org/v2/api/#provide-inject). These two options are normally intended for plugin development, but can actually be used in any Vue application. We'll see that we can leverage them in our applications to define/provide dependencies and inject them where needed.

Through the provide option, components can define elements that can be injected into any of their descendants using inject.

We can also use inject to get access to injectable elements.

Here's a basic example of using the more classic Vue syntax:

// a parent component provides 'foo' 
var Provider = { 
  provide: { 
    foo: 'bar' 
  }, 
  // ... 
} 
 
// a child component injects 'foo' 
var Child = { 
  inject: ['foo'], 
  created () { 
    console.log(this.foo) // => "bar" 
  } 
  // ... 
} 

As you can see, it isn't too complicated.