What did Vue 2.7 backport from Vue 3, and why do teams upgrade a Vue 2.6 app to 2.7 before moving to Vue 3?

## What Vue 2.7 is **Vue 2.7**, released in July 2022, is the **final minor release** of the Vue 2 line. Vue 2 then entered maintenance mode — no new features, critical bug fixes and security updates for 18 months from the 2.7 release — which means **Vue 2 reached End of Life on December 31st, 2023**. Teams that cannot upgrade by then are pointed to extended support offered by third parties. The release is known as the **backport release**: it brought a selection of Vue 3 features into the Vue 2 runtime so that code written against them would look the same in both versions. ## What was backported | feature | in Vue 2.7? | notes | |---|---|---| | Composition API (`ref`, `reactive`, `computed`, `watch`, lifecycle hooks) | yes, built in | before 2.7 it needed the `@vue/composition-api` plugin | | `<script setup>` in SFCs | yes | the syntax the Vue 3 docs primarily pair with the Composition API | | `v-bind()` in `<style>` | yes | state-driven CSS variables | | `emits` option | type inference only | not the Vue 3 runtime behaviour | | Teleport | no | Vue 3 only | | Fragments (multi-root templates) | no | Vue 3 only | | Suspense | no | Vue 3 only | | `createRenderer` custom renderers | no | Vue 3 only | ## What 2.7 does not change - **Reactivity** is still Vue 2's `Object.defineProperty` getter/setter model, with its known caveats; only the API for creating reactive state is new. - The **breaking changes** of Vue 3 — `createApp`, the component `v-model` contract, removed filters and event API — are not applied; 2.7 is a non-breaking minor. - **Ecosystem versions** can stay on their Vue 2 lines; router and store upgrades happen later, alongside the move to Vue 3. ## Why go through 2.7 first 1. **New code takes its Vue 3 shape now.** Components written with `<script setup>` and the Composition API during the migration period will not need rewriting later, so every week spent on 2.7 shrinks the eventual diff instead of growing it. 2. **Mixins can become composables early.** Extracting shared logic from mixins into composable functions is easier to review while nothing else is changing, and it removes a source of name collisions before Vue 3 changes how mixin `data` merges. 3. **The team learns the API on a stable runtime.** Developers pick up `ref`, `computed` and `watch` without also fighting a runtime upgrade. 4. **It is low risk.** A minor upgrade is far smaller than a major one, and it can ship on its own. ## The limits of the strategy - 2.7 does **not** reduce the work on breaking changes in existing code; the migration build or manual fixes still have to handle those. - Vue 2 is **past end of life**, so a long stay on 2.7 means running without upstream security fixes — a real concern for audits. - Code that depends on Vue 2 reactivity caveats keeps working on 2.7 and only breaks, or becomes unnecessary, on Vue 3, so those spots still need attention during the real switch. - Libraries that are Vue 2-only remain Vue 2-only; 2.7 does not make them Vue 3-ready. ## What the 2.7 stage looks like in practice A team that adopts 2.7 as a stage usually sets a few rules for the period it lasts: - **new components** are written with `<script setup>` and the Composition API, never with a new mixin; - **touched components** get their shared logic extracted into composables when the change is small enough to review; - **existing Options API components** are left alone unless they are being changed anyway — the Options API is fully supported in Vue 3, so rewriting them is optional work, not migration work; - **a date or trigger** is set for starting the runtime switch, so the stage cannot drift past its purpose. The following snippet runs on Vue 2.7 as written and needs no API change on Vue 3: ```vue <script setup> import { ref, computed } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) </script> <template> <button @click="count++">{{ doubled }}</button> </template> ``` Used as intended, 2.7 is the first stage of a plan: align the codebase's style with Vue 3, then move the runtime, typically via the migration build.