Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
injector
✓ import injector from 'vue-inject';
✗ const injector = require('vue-inject');
The library primarily uses and promotes ES Module syntax for importing its main injector instance.
Vue.use(injector)
✓ import Vue from 'vue';
import injector from 'vue-inject';
Vue.use(injector);
✗ Vue.use(vueInject);
This is the essential step to activate the plugin and integrate it with Vue. Forgetting it will prevent dependency injection from working. The default export is named `injector`.
injector.service, injector.factory, injector.constant
✓ import injector from 'vue-inject';
injector.service('myService', MyClass);
✗ Vue.injector.service('myService', MyClass);
These methods are called directly on the imported `injector` instance, not on the Vue instance or prototype.
Demonstrates installing `vue-inject`, registering it with Vue, defining and registering a constant and a service, and then consuming them within a Vue component's `dependencies` option.
// main.js or an entry point
import Vue from 'vue';
import injector from 'vue-inject';
// 1. Tell Vue about vue-inject
// By default, only 'dependencies' are enabled for injection in components.
// To enable component, mixin, or directive injection, pass options:
// Vue.use(injector, { components: true, mixins: true, directives: true });
Vue.use(injector);
// 2. Register a constant and a service
injector.constant('APP_TITLE', 'My Vue App');
class DataService {
constructor(APP_TITLE) {
this.appTitle = APP_TITLE;
}
fetchItems() {
// In a real application, this would make an API call
console.log(`Fetching items for ${this.appTitle}...`);
return Promise.resolve([`Item 1 for ${this.appTitle}`, 'Item 2', 'Item 3']);
}
}
// Register 'dataService', declaring 'APP_TITLE' as its dependency
injector.service('dataService', ['APP_TITLE'], DataService);
// 3. Create a Vue component that uses the injected service
const MyComponent = {
template: `
<div>
<h1>{{ appTitle }} with Vue-Inject</h1>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
<button @click="loadItems">Reload Items</button>
</div>
`,
// Declare 'dataService' and 'APP_TITLE' as dependencies for this component
dependencies: ['dataService', 'APP_TITLE'],
data() {
return {
items: [],
appTitle: this.APP_TITLE // Access the injected constant
};
},
methods: {
async loadItems() {
try {
this.items = await this.dataService.fetchItems(); // Use injected service
} catch (error) {
console.error('Error loading items:', error);
}
}
},
created() {
console.log('MyComponent created. DataService instance:', this.dataService instanceof DataService);
this.loadItems(); // Load items on component creation
}
};
// Mount the Vue application to an HTML element with id="app"
new Vue({
render: h => h(MyComponent)
}).$mount('#app');
Errors
Common errors & fixes
[vue-inject] Service 'myService' not found.
A dependency named 'myService' was declared in a component but not registered with `injector.service`, `injector.factory`, or `injector.constant`.
fixRegister the dependency using `injector.service('myService', MyClass);` (or factory/constant) before the component attempts to use it. Check for typos in the name. TypeError: Cannot read properties of undefined (reading 'service')
The `injector` object was not correctly imported or is not available in the current scope when `injector.service` (or factory/constant) is called.
fixEnsure `import injector from 'vue-inject';` is at the top of the file where you are registering dependencies.
TypeError: Cannot read properties of undefined (reading 'myService')
A component attempted to access `this.myService` but 'myService' was not properly injected. This often happens if `Vue.use(injector)` was skipped or 'myService' was not listed in the component's `dependencies` array.
fixVerify that `Vue.use(injector);` is called and that your component has `dependencies: ['myService']` in its options, with 'myService' being correctly registered.
[Vue warn]: Unknown custom element: <my-child-component> - did you register the component correctly?
A component tried to use another component (`MyChildComponent`) declared in its `components` option, but `Vue.use(injector, { components: true })` was not set, preventing `vue-inject` from registering it globally.
fixEnsure that when `vue-inject` is initialized, you explicitly enable component injection: `Vue.use(injector, { components: true });` Audit
Dependencies
No dependency data recorded yet.