2.7.8 (2022-07-22)

Bug Fixes

• reactivity: fix shallowReactive nested ref setting edge cases (2af751b), closes #12688
• sfc: align <script setup> component resolution edge case with v3 (#12687) (a695c5a), closes #12685
• types: avoid circular type inference between v2 and v3 instance types (fabc1cf), closes #12683
• types: export defineAsyncComponent type (#12684) (ba7dd2c)

Features

• setup: support listeners on setup context + useListeners() helper (adf3ac8)

2.7.7 (2022-07-16)

Bug Fixes

• codegen: script setup should not attempt to resolve native elements as component (e8d3a7d), closes #12674
• inject: fix edge case of provided with async-mutated getters (ea5d0f3), closes #12667
• setup: ensure setup context slots can be accessed immediately (67760f8), closes #12672
• types: vue.d.ts should use relative import to v3-component-public-instance (#12668) (46ec648), closes #12666
• watch: fix queueing multiple post watchers (25ffdb6), closes #12664

2.7.6 (2022-07-15)

Bug Fixes

• types: $refs can also contain ComponentPublicInstance (#12659) (fffbb9e)
• types: fix $children and $root instance types (52a5979), closes #12655
• types: fix missing expose() type on setup context (e0a9546), closes #12660

2.7.5 (2022-07-13)

Bug Fixes

• add missing export from vue.runtime.mjs (#12648) (08fb4a2)
• detect property add/deletion on reactive objects from setup when used in templates (a6e7498)
• do not set currentInstance in beforeCreate (0825d30), closes #12636
• reactivity: fix watch behavior inconsistency + deep ref shallow check (98fb01c), closes #12643
• sfc: fix sfc name inference type check (04b4703), closes #12637
• types: support Vue interface augmentations in defineComponent (005e52d), closes #12642
• watch: fix deep watch for structures containing raw refs (1a2c3c2), closes #12652

2.7.4 (2022-07-08)

Bug Fixes

• build: fix mjs dual package hazard (012e10c), closes #12626
• compiler-sfc: use safer deindent default for compatibility with previous behavior (b70a258)
• pass element creation helper to static render fns for functional components (dc8a68e), closes #12625
• ssr/reactivity: fix array setting error at created in ssr [#12632] (#12633) (ca7daef)
• types: fix missing instance properties on defineComponent this (f8de4ca), closes #12628
• types: fix this.$slots type for defineComponent (d3add06)
• types: fix type inference when using components option (1d5a411)
• types: global component registration type compat w/ defineComponent (26ff4bc), closes #12622
• watch: fix watchers triggered in mounted hook (8904ca7), closes #12624

Features

• defineAsyncComponent (9d12106), closes #12608
• support functional components in defineComponent (559600f), closes #12619

2.7.3 (2022-07-06)

Bug Fixes

• add renderTracked/Triggered merge strategy (#12616) (6d1dbee)
• ssr/reactivity: fix composition api behavior in SSR (360272b), closes #12615
• types: allow slot attribute (94ccca2), closes #12617

2.7.2 (2022-07-05)

Bug Fixes

• compiler-sfc: preserve old deindent behavior for pug (1294385), closes #12611

Features

• allow passing directive definition directly to h() (#12590) (d45bbea)
• types: define component improvements (#12612) (fb93c1b)

2.7.1 (2022-07-04)

Bug Fixes

• compiler-sfc: fix template usage check edge case for v-on statements (caceece), closes #12591
• export proxyRefs (e452e9d), closes #12600
• fix NaN comparison on state change (ff5acb1), closes #12595
• reactivity: shallowReactive should not unwrap refs (#12605) (15b9b9b), closes #12597

Backported Features

• Composition API
• SFC <script setup>
• SFC CSS v-bind

In addition, the following APIs are also supported:

• defineComponent() with improved type inference (compared to Vue.extend)

• h(), useSlot(), useAttrs(), useCssModules()

• set(), del() and nextTick() are also provided as named exports in ESM builds.

• The emits option is also supported, but only for type-checking purposes (does not affect runtime behavior)

  2.7 also supports using ESNext syntax in template expressions. When using a build system, the compiled template render function will go through the same loaders / plugins configured for normal JavaScript. This means if you have configured Babel for .js files, it will also apply to the expressions in your SFC templates.

Notes on API exposure

• In ESM builds, these APIs are provided as named exports (and named exports only):

  import Vue, { ref } from 'vue'
  
  Vue.ref // undefined, use named export instead
  

• In UMD and CJS builds, these APIs are exposed as properties on the global Vue object.

• When bundling with CJS builds externalized, bundlers should be able to handle ESM interop when externalizing CJS builds.

Behavior Differences from Vue 3

The Composition API is backported using Vue 2's getter/setter-based reactivity system to ensure browser compatibility. This means there are some important behavior differences from Vue 3's proxy-based system:

• All Vue 2 change detection caveats still apply.

• reactive(), ref(), and shallowReactive() will directly convert original objects instead of creating proxies. This means:

  // true in 2.7, false in 3.x
  reactive(foo) === foo
  

• readonly() does create a separate object, but it won't track newly added properties and does not work on arrays.

• Avoid using arrays as root values in reactive() because without property access the array's mutation won't be tracked (this will result in a warning).

• Reactivity APIs ignore properties with symbol keys.

In addition, the following features are explicitly NOT ported:

• ❌ createApp() (Vue 2 doesn't have isolated app scope)
• ❌ Top-level await in <script setup> (Vue 2 does not support async component initialization)
• ❌ TypeScript syntax in template expressions (incompatible w/ Vue 2 parser)
• ❌ Reactivity transform (still experimental)
• ❌ expose option is not supported for options components (but defineExpose() is supported in <script setup>).

TypeScript Changes

• defineComponent provides improved type inference similar to that of Vue 3. Note the type of this inside defineComponent() is not interoperable with this from Vue.extend().

• Similar to Vue 3, TSX support is now built-in. If your project previously had manual JSX type shims, make sure to remove them.

Upgrade Guide

Vue CLI / webpack

1. Upgrade local @vue/cli-xxx dependencies the latest version in your major version range (if applicable):

   • ~4.5.18 for v4
   • ~5.0.6 for v5

2. Upgrade vue to ^2.7.0. You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

   Note: if you are using @vue/test-utils, you may need to keep it in the dependencies for now, but this requirement will also be lifted in a new release of test utils.

3. Check your package manager lockfile to ensure the following dependencies meet the version requirements. They may be transitive dependencies not listed in package.json.

   • vue-loader: ^15.10.0
   • vue-demi: ^0.13.1

   If not, you will need to remove node_modules and the lockfile and perform a fresh install to ensure they are bumped to the latest version.

4. If you were previously using @vue/composition-api, update imports from it to vue instead. Note that some APIs exported by the plugin, e.g. createApp, are not ported in 2.7.

5. Update eslint-plugin-vue to latest version (9+) if you run into unused variable lint errors when using <script setup>.

6. The SFC compiler for 2.7 now uses PostCSS 8 (upgraded from 7). PostCSS 8 should be backwards compatible with most plugins, but the upgrade may cause issues if you were previously using a custom PostCSS plugin that can only work with PostCSS 7. In such cases, you will need to upgrade the relevant plugins to their PostCSS 8 compatible versions.

Vite

2.7 support for Vite is provided via a new plugin: @vitejs/plugin-vue2. This new plugin requires Vue 2.7 or above and supersedes the existing vite-plugin-vue2.

Note that the new plugin does not handle Vue-specific JSX / TSX transform, which is intentional. Vue 2 JSX / TSX transform should be handled in a separate, dedicated plugin, which will be provided soon.

Volar Compatibility

2.7 ships improved type definitions so it is no longer necessary to install @vue/runtime-dom just for Volar template type inference support. All you need now is the following config in tsconfig.json:

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Devtools Support

Vue Devtools 6.2.0 has added support for inspecting 2.7 Composition API state, but the extensions may still need a few days to go through review on respective publishing platforms.

Bug Fixes

• sfc: only include legacy decorator parser plugin when new plugin is not used (326d24a)

2.7.1 (2022-07-04)

Bug Fixes

• compiler-sfc: fix template usage check edge case for v-on statements (caceece), closes #12591
• export proxyRefs (e452e9d), closes #12600
• fix NaN comparison on state change (ff5acb1), closes #12595
• reactivity: shallowReactive should not unwrap refs (#12605) (15b9b9b), closes #12597

Backported Features

• Composition API
• SFC <script setup>
• SFC CSS v-bind

In addition, the following APIs are also supported:

• defineComponent() with improved type inference (compared to Vue.extend)

• h(), useSlot(), useAttrs(), useCssModules()

• set(), del() and nextTick() are also provided as named exports in ESM builds.

• The emits option is also supported, but only for type-checking purposes (does not affect runtime behavior)

  2.7 also supports using ESNext syntax in template expressions. When using a build system, the compiled template render function will go through the same loaders / plugins configured for normal JavaScript. This means if you have configured Babel for .js files, it will also apply to the expressions in your SFC templates.

Notes on API exposure

• In ESM builds, these APIs are provided as named exports (and named exports only):

  import Vue, { ref } from 'vue'
  
  Vue.ref // undefined, use named export instead
  

• In UMD and CJS builds, these APIs are exposed as properties on the global Vue object.

• When bundling with CJS builds externalized, bundlers should be able to handle ESM interop when externalizing CJS builds.

Behavior Differences from Vue 3

The Composition API is backported using Vue 2's getter/setter-based reactivity system to ensure browser compatibility. This means there are some important behavior differences from Vue 3's proxy-based system:

• All Vue 2 change detection caveats still apply.

• reactive(), ref(), and shallowReactive() will directly convert original objects instead of creating proxies. This means:

  // true in 2.7, false in 3.x
  reactive(foo) === foo
  

• readonly() does create a separate object, but it won't track newly added properties and does not work on arrays.

• Avoid using arrays as root values in reactive() because without property access the array's mutation won't be tracked (this will result in a warning).

• Reactivity APIs ignore properties with symbol keys.

In addition, the following features are explicitly NOT ported:

• ❌ createApp() (Vue 2 doesn't have isolated app scope)
• ❌ Top-level await in <script setup> (Vue 2 does not support async component initialization)
• ❌ TypeScript syntax in template expressions (incompatible w/ Vue 2 parser)
• ❌ Reactivity transform (still experimental)
• ❌ expose option is not supported for options components (but defineExpose() is supported in <script setup>).

TypeScript Changes

• defineComponent provides improved type inference similar to that of Vue 3. Note the type of this inside defineComponent() is not interoperable with this from Vue.extend().

• Similar to Vue 3, TSX support is now built-in. If your project previously had manual JSX type shims, make sure to remove them.

Upgrade Guide

Vue CLI / webpack

1. Upgrade local @vue/cli-xxx dependencies the latest version in your major version range (if applicable):

   • ~4.5.18 for v4
   • ~5.0.6 for v5

2. Upgrade vue to ^2.7.0. You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

   Note: if you are using @vue/test-utils, you may need to keep it in the dependencies for now, but this requirement will also be lifted in a new release of test utils.

3. Check your package manager lockfile to ensure the following dependencies meet the version requirements. They may be transitive dependencies not listed in package.json.

   • vue-loader: ^15.10.0
   • vue-demi: ^0.13.1

   If not, you will need to remove node_modules and the lockfile and perform a fresh install to ensure they are bumped to the latest version.

4. If you were previously using @vue/composition-api, update imports from it to vue instead. Note that some APIs exported by the plugin, e.g. createApp, are not ported in 2.7.

5. Update eslint-plugin-vue to latest version (9+) if you run into unused variable lint errors when using <script setup>.

6. The SFC compiler for 2.7 now uses PostCSS 8 (upgraded from 7). PostCSS 8 should be backwards compatible with most plugins, but the upgrade may cause issues if you were previously using a custom PostCSS plugin that can only work with PostCSS 7. In such cases, you will need to upgrade the relevant plugins to their PostCSS 8 compatible versions.

Vite

2.7 support for Vite is provided via a new plugin: @vitejs/plugin-vue2. This new plugin requires Vue 2.7 or above and supersedes the existing vite-plugin-vue2.

Note that the new plugin does not handle Vue-specific JSX / TSX transform, which is intentional. Vue 2 JSX / TSX transform should be handled in a separate, dedicated plugin, which will be provided soon.

Volar Compatibility

2.7 ships improved type definitions so it is no longer necessary to install @vue/runtime-dom just for Volar template type inference support. All you need now is the following config in tsconfig.json:

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Devtools Support

Vue Devtools 6.2.0 has added support for inspecting 2.7 Composition API state, but the extensions may still need a few days to go through review on respective publishing platforms.

Bug Fixes

• sfc: only include legacy decorator parser plugin when new plugin is not used (326d24a)

2.7.0-beta.8 (2022-06-28)

Bug Fixes

• compiler-sfc: should transform non relative paths when base option is present (008d78b)