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.
createGlobalConfig
✓ import { createGlobalConfig } from 'vue-global-config';
✗ const createGlobalConfig = require('vue-global-config');
This function is used to create the Vue plugin that applies global configuration to a specific component. Use it with `app.use()` in Vue 3 or `Vue.use()` in Vue 2. The package is primarily ESM-first.
ConfigProvider
✓ import { ConfigProvider } from 'vue-global-config';
✗ const { ConfigProvider } = require('vue-global-config');
This is a Vue component that allows declarative configuration within your template, similar to built-in Vue components or other UI frameworks' config providers.
ConfigOptions
✓ import type { ConfigOptions } from 'vue-global-config';
Type definition for the configuration object passed to `createGlobalConfig` or `ConfigProvider`.
Demonstrates applying global props, attributes, listeners, hooks, and a scoped slot to a `MyButton` component using `createGlobalConfig` in a Vue 3 application. It includes both default and overridden component usage.
import { createApp, h, defineComponent } from 'vue';
import { createGlobalConfig } from 'vue-global-config';
// Define a sample Vue component that can receive global configurations
const MyButton = defineComponent({
props: { title: String, data: Array },
emits: ['leftCheckChange'],
mounted() {
console.log('Component Mounted:', this.title);
// Trigger a global listener via emit
this.$emit('leftCheckChange');
},
render() {
// Access default slot, potentially from global configuration
const defaultSlot = this.$slots.default ? this.$slots.default({ option: { label: 'Default Slot Item' } }) : 'Default Content';
return h('button',
{
// Global attributes can be accessed via $attrs
onClick: () => console.log('Button clicked'),
'data-custom': this.$attrs['data-custom']
},
[
// Render global prop if available, otherwise fallback
h('span', this.title || 'No Title'),
// Render global data if available
this.data?.map(item => h('li', item.label)),
h('div', defaultSlot)
]
);
},
});
const app = createApp({
template: `
<div id="app">
<!-- MyButton without local props, relying on global config -->
<MyButton />
<!-- MyButton with local prop, overriding global config for 'title' -->
<MyButton title="Override Title" />
</div>
`,
});
// Apply global configuration to MyButton using the createGlobalConfig plugin
app.use(createGlobalConfig(MyButton, {
// Global Prop: 'title' will be passed as a prop to MyButton instances
'title': 'Global Button Title',
// Global Attr: 'data-custom' will be available via $attrs on MyButton instances
'data-custom': 'Global Custom Data',
// Global Listener: '@leftCheckChange' will be triggered when MyButton emits it
'@leftCheckChange': function () {
console.log('Global LeftCheckChange triggered by MyButton');
},
// Global Hook: '@vue:mounted' will run when any MyButton instance mounts
'@vue:mounted': function () {
console.log('Global Mounted hook for MyButton');
},
// Global Scoped Slot: A default scoped slot provided globally
'#default': ({ option }) => h('em', undefined, `${option.label} (From Global Scoped Slot)`)
}));
app.mount('#app');
Errors
Common errors & fixes
TypeError: app.use expects an install function or an object with an install method
Attempting to pass a raw Vue component directly to `app.use()` (or `Vue.use()` in Vue 2) instead of the plugin returned by `createGlobalConfig`.
fixWrap your component and global configuration with `createGlobalConfig`: `app.use(createGlobalConfig(YourComponent, { ... }))`. Property 'someProp' was accessed during render but is not defined on instance.
A global prop was defined but the target component does not declare it in its `props` option, or there's a mismatch in naming convention (e.g., camelCase vs. kebab-case).
fixEnsure the target component explicitly declares all global props it intends to consume in its `props` option. Check `options.camelizePropNames` in `createGlobalConfig` options for naming consistency.
The @vnode-mounted hook is deprecated in Vue 3.4 and later and will not function as expected.
Using the `@vnode-mounted` or `@vnodeMounted` hook syntax for global component hooks in a Vue 3.4+ environment.
fixUpdate your global configuration to remove these deprecated hooks, as they are no longer supported in Vue 3.4 and later.
Audit
Dependencies
vuerequiredCore dependency for any Vue.js application.
@vue/composition-apioptionalProvides Composition API support for Vue 2 applications when needed.
element-plusoptionalPeer dependency, suggesting compatibility or integration scenarios, though not strictly required for the library's core functionality. The library offers an alternative/complement to framework-specific config providers.