vue-create-api

library0.2.4jsnpmunverified

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.

devops

npm install vue-create-api

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CREATE-API

vue-create-api

devopsjavascriptv0.2.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CreateAPI

✓ import CreateAPI from 'vue-create-api'

✗ const CreateAPI = require('vue-create-api')

ESM default export. CommonJS require works but may lack type inference.

createFunction

✓ import { createFunction } from 'vue-create-api'

✗ import createFunction from 'vue-create-api'

TypeScript type export for the $create method's config function. Not a runtime export.

Vue.createAPI

✓ Vue.createAPI(Component, single)

✗ Vue.use(CreateAPI) and then Vue.createAPI(Component, true)

Must call `Vue.use(CreateAPI)` first; otherwise Vue.createAPI is undefined.

Shows installing CreateAPI, creating an invokable component, and calling it with props and events.

import Vue from 'vue' import CreateAPI from 'vue-create-api' // Install plugin Vue.use(CreateAPI, { componentPrefix: 'cube-', apiPrefix: '$create-' }) // Example component const MyDialog = { name: 'my-dialog', template: '<div v-if="show" @click="$emit(\'close\')"><slot/><p>{{ message }}</p></div>', props: { message: String, show: { type: Boolean, default: false } } } // Make it invokable via API Vue.createAPI(MyDialog, true) // singleton // Use in a component method const instance = this.$createMyDialog({ $props: { message: 'Hello from API!', show: true }, $events: { close: () => console.log('closed') } }) instance.show() // or the component's show method by design

Debug

Known issues

breakingVue 3 is not supported. Only works with Vue 2.x (<=2.7).

fix

Use vue-demi or a Vue 3 compatible alternative like @vue/composition-api or directly use createApp.

affects: all

deprecatedThe plugin modifies Vue.prototype, which is discouraged in Vue 3 and may conflict with multiple Vue instances.

fix

Consider migrating to a composable pattern or use inject/provide.

affects: all

gotchaDo not forget to call Vue.use(CreateAPI) before Vue.createAPI().

fix

Always add `Vue.use(CreateAPI)` first.

affects: all

gotchaThe component must have a `name` option for the API method name to be generated correctly.

fix

Define `name: 'my-component'` in the component definition.

affects: all

gotchaWhen 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.

fix

Add `keep_fnames: true` to minifier options. Example: `new TerserPlugin({ terserOptions: { keep_fnames: true } })`.

affects: >=0.2.0

gotchaEvents in config must be defined as methods or functions (not inline strings) to be bound correctly.

fix

Use `$events: { 'event-name': this.handler }` where `handler` is a method.

affects: all

Errors

Common errors & fixes

Vue.createAPI is not a function

Forgot to call Vue.use(CreateAPI) before using Vue.createAPI

fix

Add Vue.use(CreateAPI) in your entry file (e.g., main.js).

Cannot read property '$createMyComponent' of undefined

Component 'name' is missing or mangled by minifier

fix

Ensure component has a `name` property (e.g., name: 'my-component') and if using minification, set `keep_fnames: true` in terser/uglify options.

Cannot find module 'vue-create-api' or its corresponding type declarations.

Package not installed or TypeScript cannot resolve types

fix

Run `npm install vue-create-api`. If using TS, ensure `vue-create-api` is in tsconfig's `types` or paths.

TypeError: Cannot read properties of undefined (reading '$props')

Config object passed to `$create` is missing or malformed

fix

Pass an object with `$props` (and optionally `$events`). Example: `this.$createMyDialog({ $props: { ... } })`.

Failed to resolve component: $create-dialog... (in 3rd party lib)

Component prefix or API prefix mismatch; the method name is not correctly generated

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.

Upgrade

Version history

0.2.4latest on npm

Audit

Dependencies

vuerequiredpeer dependency, Vue 2.x required to provide Vue constructor and prototype

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/cube-ui/create-api ↗

packagevue-create-api ↗

homepagehttps://github.com/cube-ui/create-api#readme ↗