{"id":14286,"library":"vue-inject","title":"Vue-Inject","description":"Vue-Inject is a dependency injection library specifically designed for Vue.js applications, leveraging the Jpex DI container under the hood. The current stable version is 2.1.1. It features an infrequent release cadence, primarily driven by critical bug fixes or significant internal dependency upgrades like Jpex itself. Its core differentiation lies in its direct integration with Vue's options API through a `dependencies` property in components, allowing services, factories, and constants to be seamlessly injected. Since version 2.0.0, it also offers optional injection capabilities for components, mixins, and directives, providing a flexible way to manage various types of dependencies within the Vue ecosystem, simplifying application structure and testability.","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/jpex-js/vue-inject","tags":["javascript"],"install":[{"cmd":"npm install vue-inject","lang":"bash","label":"npm"},{"cmd":"yarn add vue-inject","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-inject","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses and promotes ES Module syntax for importing its main injector instance.","wrong":"const injector = require('vue-inject');","symbol":"injector","correct":"import injector from 'vue-inject';"},{"note":"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`.","wrong":"Vue.use(vueInject);","symbol":"Vue.use(injector)","correct":"import Vue from 'vue';\nimport injector from 'vue-inject';\nVue.use(injector);"},{"note":"These methods are called directly on the imported `injector` instance, not on the Vue instance or prototype.","wrong":"Vue.injector.service('myService', MyClass);","symbol":"injector.service, injector.factory, injector.constant","correct":"import injector from 'vue-inject';\ninjector.service('myService', MyClass);"}],"quickstart":{"code":"// main.js or an entry point\nimport Vue from 'vue';\nimport injector from 'vue-inject';\n\n// 1. Tell Vue about vue-inject\n// By default, only 'dependencies' are enabled for injection in components.\n// To enable component, mixin, or directive injection, pass options:\n// Vue.use(injector, { components: true, mixins: true, directives: true });\nVue.use(injector);\n\n// 2. Register a constant and a service\ninjector.constant('APP_TITLE', 'My Vue App');\n\nclass DataService {\n  constructor(APP_TITLE) {\n    this.appTitle = APP_TITLE;\n  }\n  fetchItems() {\n    // In a real application, this would make an API call\n    console.log(`Fetching items for ${this.appTitle}...`);\n    return Promise.resolve([`Item 1 for ${this.appTitle}`, 'Item 2', 'Item 3']);\n  }\n}\n// Register 'dataService', declaring 'APP_TITLE' as its dependency\ninjector.service('dataService', ['APP_TITLE'], DataService);\n\n// 3. Create a Vue component that uses the injected service\nconst MyComponent = {\n  template: `\n    <div>\n      <h1>{{ appTitle }} with Vue-Inject</h1>\n      <ul>\n        <li v-for=\"item in items\" :key=\"item\">{{ item }}</li>\n      </ul>\n      <button @click=\"loadItems\">Reload Items</button>\n    </div>\n  `,\n  // Declare 'dataService' and 'APP_TITLE' as dependencies for this component\n  dependencies: ['dataService', 'APP_TITLE'],\n  data() {\n    return {\n      items: [],\n      appTitle: this.APP_TITLE // Access the injected constant\n    };\n  },\n  methods: {\n    async loadItems() {\n      try {\n        this.items = await this.dataService.fetchItems(); // Use injected service\n      } catch (error) {\n        console.error('Error loading items:', error);\n      }\n    }\n  },\n  created() {\n    console.log('MyComponent created. DataService instance:', this.dataService instanceof DataService);\n    this.loadItems(); // Load items on component creation\n  }\n};\n\n// Mount the Vue application to an HTML element with id=\"app\"\nnew Vue({\n  render: h => h(MyComponent)\n}).$mount('#app');","lang":"javascript","description":"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."},"warnings":[{"fix":"When calling `Vue.use(injector)`, pass an options object to enable specific injection types, e.g., `Vue.use(injector, { components: true, mixins: true, directives: true });`","message":"With version 2.0.0, injecting components, mixins, or directives is no longer enabled by default. Only 'dependencies' are injected unless explicitly configured.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update calls from `injector.clearCache()` to `injector.$clearCache()` and `injector.get('dep')` to `injector.$resolve('dep')` to align with the Jpex 2.0.0 API.","message":"Version 1.0.0 introduced an upgrade to Jpex 2.0.0, which altered the API for certain methods. Specifically, `clearCache` and `get` methods were renamed.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `import Vue from 'vue'; import injector from 'vue-inject'; Vue.use(injector);` is called early in your application's bootstrap process.","message":"Forgetting to register `vue-inject` with Vue via `Vue.use(injector)` will lead to dependency injection not working in your components.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use `dependencies: ['dependencyName']` (an array of strings) in your component options, ensuring the name matches the one registered with `injector.service`, `injector.factory`, or `injector.constant`.","message":"Incorrectly declaring dependencies in a Vue component's `dependencies` option (e.g., misspelling the key or incorrect array syntax) will prevent the service from being injected.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'2.0.0':81 '2.1.1':30 'allow':70 'also':83 'api':63 'applic':16,108 'bug':41 'cadenc':36 'capabl':87 'compon':69,89 'constant':74 'contain':21 'core':52 'critic':40 'current':26 'depend':9,46,66,102 'design':13 'di':20 'differenti':53 'direct':57,92 'driven':38 'ecosystem':106 'factori':72 'featur':32 'fix':42 'flexibl':95 'hood':24 'infrequ':34 'inject':3,6,10,78,86 'integr':58 'intern':45 'javascript':112 'jpex':19,49 'leverag':17 'librari':11 'lie':54 'like':48 'manag':98 'mixin':90 'offer':84 'option':62,85 'primarili':37 'properti':67 'provid':93 'releas':35 'seamless':77 'servic':71 'signific':44 'simplifi':107 'sinc':79 'specif':12 'stabl':27 'structur':109 'testabl':111 'type':100 'upgrad':47 'various':99 'version':28,80 'vue':2,5,60,105 'vue-inject':1,4 'vue.js':15 'way':96 'within':103","created_at":"2026-04-20T01:58:55.155173+00:00","updated_at":"2026-04-20T01:58:55.155173+00:00","problems":[{"fix":"Register the dependency using `injector.service('myService', MyClass);` (or factory/constant) before the component attempts to use it. Check for typos in the name.","cause":"A dependency named 'myService' was declared in a component but not registered with `injector.service`, `injector.factory`, or `injector.constant`.","error":"[vue-inject] Service 'myService' not found."},{"fix":"Ensure `import injector from 'vue-inject';` is at the top of the file where you are registering dependencies.","cause":"The `injector` object was not correctly imported or is not available in the current scope when `injector.service` (or factory/constant) is called.","error":"TypeError: Cannot read properties of undefined (reading 'service')"},{"fix":"Verify that `Vue.use(injector);` is called and that your component has `dependencies: ['myService']` in its options, with 'myService' being correctly registered.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'myService')"},{"fix":"Ensure that when `vue-inject` is initialized, you explicitly enable component injection: `Vue.use(injector, { components: true });`","cause":"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.","error":"[Vue warn]: Unknown custom element: <my-child-component> - did you register the component correctly?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/jpex-js/vue-inject","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-inject","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}