Upgrading a Vue 2 entry file that uses `Vue.use`, `Vue.component` and `Vue.prototype.$http`, what replaces each in Vue 3, and why?

## The problem with Vue 2's global API Vue 2 had no concept of an application. What people called "the app" was just a root instance created with `new Vue()`, and every root created from the same `Vue` constructor **shared one global configuration**. That caused two concrete problems: - **Test pollution.** A plugin installed with `Vue.use` or a mixin added with `Vue.mixin` stayed installed for every later test, and some of those calls could not be undone. Vue 2's test utilities had to offer `createLocalVue`, an extended constructor, just to isolate plugins per test. - **Several apps on one page.** Two roots on the same page could not have different global components, mixins or config, because `Vue.mixin(...)` affected both. Vue 3's answer is the **app instance**: `createApp(rootComponent)` returns an object with its own `config`, component registry, directives and plugins. The rule of thumb from the migration guide is that *any API that globally mutates Vue's behaviour moves onto the app instance*. ## The mapping | Vue 2 global API | Vue 3 replacement | |---|---| | `Vue.use(Plugin)` | `app.use(Plugin)` | | `Vue.component('Name', def)` | `app.component('Name', def)` | | `Vue.directive('focus', def)` | `app.directive('focus', def)` | | `Vue.mixin(obj)` | `app.mixin(obj)` | | `Vue.config` | `app.config` | | `Vue.prototype.$http = http` | `app.config.globalProperties.$http = http` | | `Vue.config.ignoredElements` | `app.config.compilerOptions.isCustomElement` (a function) | | `Vue.config.productionTip` | Removed | | `Vue.extend(options)` | Removed: plain options objects, `defineComponent` for type inference, `extends` for inheritance | ## Mounting changed too `new Vue({ el: '#app' })` or `new Vue({ render: h => h(App) }).$mount('#app')` becomes: ```ts import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` One visible difference: Vue 2 **replaced** the mount element with the rendered root, while Vue 3 renders **inside** it, replacing its `innerHTML`. CSS or scripts that targeted the original element's attributes can notice the change. ## Non-mutating helpers became named exports APIs that never mutated global state, such as `Vue.nextTick` or `Vue.observable`, were not moved to the app. They became **named exports** (`import { nextTick, reactive } from 'vue'`) so a bundler can drop the ones you never import. Bundled code that called `Vue.nextTick` on a default-imported `Vue` has to switch to the named import, because Vue 3's ES module build has no default `Vue` export. ## Plugins and globalProperties - **Auto-installing plugins stop installing.** Some Vue 2 UMD builds called `window.Vue.use(Plugin)` on load. With no global constructor to install into, that no longer works; call `app.use(Plugin)` yourself. - **`globalProperties` is copied onto every component instance** in that app, so `this.$http` keeps working in the Options API. In `<script setup>` there is no `this`, so shared services are usually exposed with `app.provide(key, value)` and read with `inject(key)`; the migration guide suggests `provide` as the alternative. - **Order matters.** Vue's docs say `mount()` should be called after all app configuration and asset registration is done, because mounting renders the root right away. ## Traps interviewers probe - **Several apps, several registries.** `createApp` can be called more than once on a page, and each app has its own components, directives and config. A component registered on one app is unknown to the other, which is exactly the isolation Vue 2 lacked. - **Chaining versus return values.** `app.use`, `app.component(name, def)`, `app.directive(name, def)`, `app.mixin` and `app.provide` return the app, so they chain. `app.mount` does not: it returns the **root component instance**, so `createApp(App).use(P).mount('#app')` must come last. - **Config moved with everything else.** Hooks such as `Vue.config.errorHandler` become `app.config.errorHandler`, set per app. - **`Vue.extend` has no drop-in.** Components are plain options objects; `defineComponent` exists for type inference and `extends` for the rare inheritance case. ## A migration checklist 1. Find every `Vue.` call in the entry file and in plugin files, and route each through the single `app` object. 2. Replace `Vue.prototype.$x` with `app.config.globalProperties.$x`, or with `provide`/`inject` if `<script setup>` code needs it. 3. Replace `Vue.nextTick` and similar helpers with named imports. 4. In tests, create a fresh app or mount with per-test plugins instead of relying on `createLocalVue`.