{"id":42266,"library":"vue-create-api","title":"vue-create-api","description":"Vue plugin enabling API-style invocation of Vue components (e.g., dialogs, toasts) via $create methods like `this.$createDialog()` rather than using <component> tags. Current version 0.2.4, stable but low activity. Key differentiator: provides singleton support, reactive $props, and event binding from config objects. Ships TypeScript definitions. Commonly used with cube-ui but works standalone. Requires Vue 2.x; no Vue 3 support yet.","status":"maintenance","version":"0.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/cube-ui/create-api","tags":["javascript","create-api","cube-ui","Vue","component","typescript"],"install":[{"cmd":"npm install vue-create-api","lang":"bash","label":"npm"},{"cmd":"yarn add vue-create-api","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-create-api","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, Vue 2.x required to provide Vue constructor and prototype","package":"vue","optional":false}],"imports":[{"note":"ESM default export. CommonJS require works but may lack type inference.","wrong":"const CreateAPI = require('vue-create-api')","symbol":"CreateAPI","correct":"import CreateAPI from 'vue-create-api'"},{"note":"TypeScript type export for the $create method's config function. Not a runtime export.","wrong":"import createFunction from 'vue-create-api'","symbol":"createFunction","correct":"import { createFunction } from 'vue-create-api'"},{"note":"Must call `Vue.use(CreateAPI)` first; otherwise Vue.createAPI is undefined.","wrong":"Vue.use(CreateAPI) and then Vue.createAPI(Component, true)","symbol":"Vue.createAPI","correct":"Vue.createAPI(Component, single)"}],"quickstart":{"code":"import Vue from 'vue'\nimport CreateAPI from 'vue-create-api'\n// Install plugin\nVue.use(CreateAPI, {\n  componentPrefix: 'cube-',\n  apiPrefix: '$create-'\n})\n\n// Example component\nconst MyDialog = {\n  name: 'my-dialog',\n  template: '<div v-if=\"show\" @click=\"$emit(\\'close\\')\"><slot/><p>{{ message }}</p></div>',\n  props: {\n    message: String,\n    show: { type: Boolean, default: false }\n  }\n}\n\n// Make it invokable via API\nVue.createAPI(MyDialog, true) // singleton\n\n// Use in a component method\nconst instance = this.$createMyDialog({\n  $props: {\n    message: 'Hello from API!',\n    show: true\n  },\n  $events: {\n    close: () => console.log('closed')\n  }\n})\n\ninstance.show() // or the component's show method by design","lang":"typescript","description":"Shows installing CreateAPI, creating an invokable component, and calling it with props and events."},"warnings":[{"fix":"Use vue-demi or a Vue 3 compatible alternative like @vue/composition-api or directly use createApp.","message":"Vue 3 is not supported. Only works with Vue 2.x (<=2.7).","severity":"breaking","affected_versions":"all"},{"fix":"Consider migrating to a composable pattern or use inject/provide.","message":"The plugin modifies Vue.prototype, which is discouraged in Vue 3 and may conflict with multiple Vue instances.","severity":"deprecated","affected_versions":"all"},{"fix":"Always add `Vue.use(CreateAPI)` first.","message":"Do not forget to call Vue.use(CreateAPI) before Vue.createAPI().","severity":"gotcha","affected_versions":"all"},{"fix":"Define `name: 'my-component'` in the component definition.","message":"The component must have a `name` option for the API method name to be generated correctly.","severity":"gotcha","affected_versions":"all"},{"fix":"Add `keep_fnames: true` to minifier options. Example: `new TerserPlugin({ terserOptions: { keep_fnames: true } })`.","message":"When using webpack with terser-webpack-plugin (vue-cli 3.x) or uglifyjs (vue-cli 2.x), function names may be mangled, breaking the $create method generation.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use `$events: { 'event-name': this.handler }` where `handler` is a method.","message":"Events in config must be defined as methods or functions (not inline strings) to be bound correctly.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"search_vec":"'0.2.4':30 '2':62 '3':66 'activ':34 'api':4,9,72 'api-styl':8 'bind':44 'common':51 'compon':14,77 'config':46 'creat':3,19,71 'create-api':70 'createdialog':23 'cube':55,74 'cube-ui':54,73 'current':28 'definit':50 'dialog':16 'differenti':36 'e.g':15 'enabl':7 'event':43 'invoc':11 'javascript':69 'key':35 'like':21 'low':33 'method':20 'object':47 'plugin':6 'prop':41 'provid':37 'rather':24 'reactiv':40 'requir':60 'ship':48 'singleton':38 'stabl':31 'standalon':59 'style':10 'support':39,67 'tag':27 'toast':17 'typescript':49,78 'ui':56,75 'use':26,52 'version':29 'via':18 'vue':2,5,13,61,65,76 'vue-create-api':1 'work':58 'x':63 'yet':68","created_at":"2026-06-04T18:56:25.508062+00:00","updated_at":"2026-06-04T18:56:25.508062+00:00","problems":[{"fix":"Add Vue.use(CreateAPI) in your entry file (e.g., main.js).","cause":"Forgot to call Vue.use(CreateAPI) before using Vue.createAPI","error":"Vue.createAPI is not a function"},{"fix":"Ensure component has a `name` property (e.g., name: 'my-component') and if using minification, set `keep_fnames: true` in terser/uglify options.","cause":"Component 'name' is missing or mangled by minifier","error":"Cannot read property '$createMyComponent' of undefined"},{"fix":"Run `npm install vue-create-api`. If using TS, ensure `vue-create-api` is in tsconfig's `types` or paths.","cause":"Package not installed or TypeScript cannot resolve types","error":"Cannot find module 'vue-create-api' or its corresponding type declarations."},{"fix":"Pass an object with `$props` (and optionally `$events`). Example: `this.$createMyDialog({ $props: { ... } })`.","cause":"Config object passed to `$create` is missing or malformed","error":"TypeError: Cannot read properties of undefined (reading '$props')"},{"fix":"Check options passed to Vue.use(CreateAPI). Default method name is `$create` + component name (camelized). If you used `apiPrefix: '$create-'`, method becomes `$create-{name}` in kebab-case. Use `this['$create-dialog'](...)` if needed.","cause":"Component prefix or API prefix mismatch; the method name is not correctly generated","error":"Failed to resolve component: $create-dialog... (in 3rd party lib)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/cube-ui/create-api#readme","github":"https://github.com/cube-ui/create-api","docs":null,"changelog":null,"pypi":null,"npm":"vue-create-api","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}