{"id":12483,"library":"vue-global-api","title":"Vue Global API","description":"vue-global-api is a utility package for Vue 3 that makes Composition API functions globally available within `<script setup>` contexts, removing the need for explicit imports of `ref`, `computed`, `watch`, and other common APIs from 'vue'. This aims to reduce boilerplate and streamline the development experience, aligning with the macro-like availability of `defineProps` and `defineEmits`. The current stable version is `0.4.1`, and it's maintained by Anthony Fu, a prominent Vue core team member. While Vue itself doesn't have a fixed release cycle for minor versions (typically 3-6 months), this package tends to follow its development. Key differentiators include its granular control over which APIs are global via sub-module imports (e.g., `vue-global-api/ref` or `vue-global-api/reactivity`), and its specific ESLint configuration to prevent 'no-undef' errors. It is designed for bundler-based Vue applications and offers an alternative to importing APIs from 'vue' in every single-file component.","status":"active","version":"0.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/antfu/vue-global-api","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-global-api","lang":"bash","label":"npm"},{"cmd":"yarn add vue-global-api","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-global-api","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the Composition API functions that this package makes global.","package":"vue","optional":false}],"imports":[{"note":"This is a side-effect import that globally registers all common Composition APIs. It must be imported in your main entry file (e.g., `main.ts`) before any Vue components are used. Do not try to import named exports from the root package.","wrong":"import { ref } from 'vue-global-api'","symbol":"Global Registration","correct":"import 'vue-global-api'"},{"note":"For fine-grained control, you can import individual APIs as side effects. This is primarily an ESM-only library, used in modern Vue setups (Vite, webpack with ESM support).","wrong":"const ref = require('vue-global-api/ref')","symbol":"Specific API Registration","correct":"import 'vue-global-api/ref'"},{"note":"Collections like 'reactivity' (for `ref`, `computed`, `watch`) or 'lifecycle' (for `onMounted`, etc.) can also be imported as side effects. Like other imports from this package, they don't export values directly, but rather register them globally.","wrong":"import { watch } from 'vue-global-api/reactivity'","symbol":"Collection Registration","correct":"import 'vue-global-api/reactivity'"}],"quickstart":{"code":"/* main.ts */\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\n// Globally register all common Vue Composition APIs\n// This must be imported BEFORE any Vue components that use these globals\nimport 'vue-global-api'\n\ncreateApp(App).mount('#app')\n\n/* App.vue */\n<script setup lang=\"ts\">\n// No need to import ref, computed, watch, etc.\n// They are globally available thanks to 'vue-global-api'\nconst counter = ref(0)\n\nconst doubled = computed(() => counter.value * 2)\n\nwatch(doubled, (v) => {\n  console.log('Doubled value changed:', v)\n})\n\nfunction increment() {\n  counter.value++\n}\n</script>\n\n<template>\n  <div>\n    <h1>Counter: {{ counter }}</h1>\n    <h2>Doubled: {{ doubled }}</h2>\n    <button @click=\"increment\">Increment</button>\n  </div>\n</template>\n\n<style scoped>\n/* Your styles here */\n</style>\n\n/* .eslintrc.js (or .eslintrc.cjs) */\nmodule.exports = {\n  extends: [\n    'eslint:recommended',\n    'plugin:vue/vue3-recommended',\n    'vue-global-api' // Extend the ESLint config for global APIs\n    // Or for fine-grain control:\n    // 'vue-global-api/reactivity'\n  ]\n  // ... other ESLint configurations\n}","lang":"typescript","description":"This quickstart demonstrates the core usage of `vue-global-api` by registering all common Composition APIs globally in `main.ts` and then using them directly in a Vue component without explicit imports. It also includes the necessary ESLint configuration."},"warnings":[{"fix":"Extend your ESLint configuration with `'vue-global-api'` (or specific sub-configs like `'vue-global-api/reactivity'`). Refer to the package's documentation for exact syntax.","message":"Failing to configure ESLint will result in 'no-undef' errors for globally exposed APIs.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure the `import 'vue-global-api'` statement is placed early in your main entry file (e.g., `main.ts` or `main.js`), typically right after Vue's `createApp` import.","message":"The global registration import (`import 'vue-global-api'`) must occur *before* any Vue components are processed that utilize these global APIs.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If using a CDN, avoid this package and instead use `Object.assign(window, Vue)` after loading the Vue global build. This package is specifically for module-based bundler environments.","message":"This package is not designed for direct CDN usage. For browser environments without a bundler, the recommended approach is to manually assign Vue's global object to `window` (e.g., `Object.assign(window, Vue)`).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use the side-effect import syntax: `import 'vue-global-api'` or `import 'vue-global-api/ref'`.","message":"Do not attempt to import named exports directly from `vue-global-api` or its submodules (e.g., `import { ref } from 'vue-global-api'`). The package works by side-effect global registration.","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":"Add `'vue-global-api'` to the `extends` array in your `.eslintrc.js` (or `.eslintrc.cjs`) configuration file. For example: `extends: ['plugin:vue/vue3-recommended', 'vue-global-api']`.","cause":"ESLint is not aware that `ref` (or other global APIs) are globally available through `vue-global-api`.","error":"ESLint: 'ref' is not defined. (no-undef)"},{"fix":"Ensure `import 'vue-global-api'` is present in your application's entry file (e.g., `main.ts`) and that it executes *before* any Vue components are initialized. Verify Vue 3 is correctly installed and configured.","cause":"The `vue-global-api` package was either not imported, or it was imported *after* a component that attempted to use a global API.","error":"TypeError: ref is not a function"},{"fix":"Install the package using `npm install vue-global-api` or `yarn add vue-global-api`. Check `package.json` to confirm it's listed in `dependencies`.","cause":"The `vue-global-api` package is not installed or incorrectly referenced in `package.json`.","error":"Module not found: Error: Can't resolve 'vue-global-api'"}],"ecosystem":"npm"}