{"id":12484,"library":"vue-global-config","title":"Vue Global Config","description":"Vue Global Config is a utility library for Vue 2 and Vue 3 applications that enables global configuration of component properties, attributes, listeners, hooks, and slots. It addresses a common need in Vue development where components registered globally lack a straightforward way to accept global configuration. The library provides a `createGlobalConfig` function to register a configuration plugin with `app.use()` (Vue 3) or `Vue.use()` (Vue 2), and a `ConfigProvider` component for declarative configuration. It supports the current stable Vue 3.x and Vue 2.x versions, often releasing new patches to support the latest Vue minor versions or fix integration issues. Its key differentiator is offering a generic global configuration mechanism for *any* component, unlike framework-specific solutions (e.g., Element Plus's ConfigProvider) which are often limited to components within their own ecosystem. The package is currently at version 0.6.3 and actively maintained.","status":"active","version":"0.6.3","language":"javascript","source_language":"en","source_url":"https://github.com/cloydlau/vue-global-config","tags":["javascript","config","configuration","global","option","options","slot","slots","vue","typescript"],"install":[{"cmd":"npm install vue-global-config","lang":"bash","label":"npm"},{"cmd":"yarn add vue-global-config","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-global-config","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for any Vue.js application.","package":"vue","optional":false},{"reason":"Provides Composition API support for Vue 2 applications when needed.","package":"@vue/composition-api","optional":true},{"reason":"Peer 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.","package":"element-plus","optional":true}],"imports":[{"note":"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.","wrong":"const createGlobalConfig = require('vue-global-config');","symbol":"createGlobalConfig","correct":"import { createGlobalConfig } from 'vue-global-config';"},{"note":"This is a Vue component that allows declarative configuration within your template, similar to built-in Vue components or other UI frameworks' config providers.","wrong":"const { ConfigProvider } = require('vue-global-config');","symbol":"ConfigProvider","correct":"import { ConfigProvider } from 'vue-global-config';"},{"note":"Type definition for the configuration object passed to `createGlobalConfig` or `ConfigProvider`.","symbol":"ConfigOptions","correct":"import type { ConfigOptions } from 'vue-global-config';"}],"quickstart":{"code":"import { createApp, h, defineComponent } from 'vue';\nimport { createGlobalConfig } from 'vue-global-config';\n\n// Define a sample Vue component that can receive global configurations\nconst MyButton = defineComponent({\n  props: { title: String, data: Array },\n  emits: ['leftCheckChange'],\n  mounted() {\n    console.log('Component Mounted:', this.title);\n    // Trigger a global listener via emit\n    this.$emit('leftCheckChange');\n  },\n  render() {\n    // Access default slot, potentially from global configuration\n    const defaultSlot = this.$slots.default ? this.$slots.default({ option: { label: 'Default Slot Item' } }) : 'Default Content';\n    return h('button', \n      { \n        // Global attributes can be accessed via $attrs\n        onClick: () => console.log('Button clicked'),\n        'data-custom': this.$attrs['data-custom'] \n      },\n      [\n        // Render global prop if available, otherwise fallback\n        h('span', this.title || 'No Title'),\n        // Render global data if available\n        this.data?.map(item => h('li', item.label)),\n        h('div', defaultSlot)\n      ]\n    );\n  },\n});\n\nconst app = createApp({\n  template: `\n    <div id=\"app\">\n      <!-- MyButton without local props, relying on global config -->\n      <MyButton />\n      <!-- MyButton with local prop, overriding global config for 'title' -->\n      <MyButton title=\"Override Title\" />\n    </div>\n  `,\n});\n\n// Apply global configuration to MyButton using the createGlobalConfig plugin\napp.use(createGlobalConfig(MyButton, {\n  // Global Prop: 'title' will be passed as a prop to MyButton instances\n  'title': 'Global Button Title',\n\n  // Global Attr: 'data-custom' will be available via $attrs on MyButton instances\n  'data-custom': 'Global Custom Data',\n  \n  // Global Listener: '@leftCheckChange' will be triggered when MyButton emits it\n  '@leftCheckChange': function () {\n    console.log('Global LeftCheckChange triggered by MyButton');\n  },\n\n  // Global Hook: '@vue:mounted' will run when any MyButton instance mounts\n  '@vue:mounted': function () {\n    console.log('Global Mounted hook for MyButton');\n  },\n\n  // Global Scoped Slot: A default scoped slot provided globally\n  '#default': ({ option }) => h('em', undefined, `${option.label} (From Global Scoped Slot)`)\n}));\n\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"fix":"Remove or replace `@vnode-mounted` and `@vnodeMounted` hook definitions in your global configuration when targeting Vue 3.4+.","message":"The support for `@vnode-mounted` and `@vnodeMounted` hooks was removed in Vue 3.4. Applications upgrading to Vue 3.4 or later using these specific global hooks will need to refactor them.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Update your global configuration object: move any top-level `props` definitions to `options.props` and review the `options.camelizePropNames` behavior for prop name resolution.","message":"The global `props` option structure changed significantly. `props` were moved into `options.props`, and a new `options.camelizePropNames` option was introduced to control prop name camelization.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Always wrap your component and global configuration with `createGlobalConfig()` when using the `app.use()` or `Vue.use()` plugin approach.","message":"The README examples for `app.use(YourComponent, config)` are misleading. The `createGlobalConfig` function must be explicitly called to generate the plugin, i.e., `app.use(createGlobalConfig(YourComponent, config))`.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure you use the correct hook/listener syntax for your target Vue version. For Vue 2: `@hook:lifecycleEvent` and kebab-case for event listeners. For Vue 3: `@vue:lifecycleEvent` and camelCase or kebab-case for event listeners, depending on configuration.","message":"Vue 2 and Vue 3 use different naming conventions for component lifecycle hooks and event listeners. For instance, Vue 2 uses `@hook:mounted` while Vue 3 uses `@vue:mounted` for component hooks.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap your component and global configuration with `createGlobalConfig`: `app.use(createGlobalConfig(YourComponent, { ... }))`.","cause":"Attempting to pass a raw Vue component directly to `app.use()` (or `Vue.use()` in Vue 2) instead of the plugin returned by `createGlobalConfig`.","error":"TypeError: app.use expects an install function or an object with an install method"},{"fix":"Ensure 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.","cause":"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).","error":"Property 'someProp' was accessed during render but is not defined on instance."},{"fix":"Update your global configuration to remove these deprecated hooks, as they are no longer supported in Vue 3.4 and later.","cause":"Using the `@vnode-mounted` or `@vnodeMounted` hook syntax for global component hooks in a Vue 3.4+ environment.","error":"The @vnode-mounted hook is deprecated in Vue 3.4 and later and will not function as expected."}],"ecosystem":"npm"}