Vue.js Upgrade Guide Compare Vue.js versions and see exactly what changes, what requires action, and what you can start using.
From Vue.js 2.7.0 Vue.js 3.0.0 Vue.js 3.1.0 Vue.js 3.2.0 Vue.js 3.3.0 Vue.js 3.4.0 Vue.js 3.5.0 → To Vue.js 3.2.0 Vue.js 3.3.0 Vue.js 3.4.0 Vue.js 3.5.0
9 Changes
0 Breaking
0 Actions
5 Features
0 Migration tools
New Features Vue 3.2 stabilizes <script setup>, a compile-time syntax for using the Composition API inside Single-File Components with less boilerplate.
<script>
import { ref } from "vue"
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
</script><script setup>
import { ref } from "vue"
const count = ref(0)
const increment = () => {
count.value++
}
</script> Migration No migration is required. Existing setup() components remain valid. <script setup> can be adopted incrementally to reduce Composition API boilerplate in Single-File Components.
Vue 3.2 stabilizes the :slotted() pseudo-class for scoped SFC styles, allowing a component to explicitly style content passed through slots.
<template>
<slot />
</template>
<style scoped>
:slotted(.message) {
color: red;
}
</style> Migration No migration is required. Use :slotted() when scoped component styles need to target elements provided by a parent through slots.
Vue 3.2 introduces defineCustomElement(), allowing Vue components to be packaged and registered as native Custom Elements.
import {
defineCustomElement
} from "vue"
import MyElement from "./MyElement.ce.vue"
const MyCustomElement =
defineCustomElement(MyElement)
customElements.define(
"my-element",
MyCustomElement
) Migration No migration is required. Use defineCustomElement() when Vue components need to be distributed or consumed as native Web Components.
Vue 3.2 introduces effectScope() for grouping reactive effects such as computed values and watchers so they can be disposed together.
import {
effectScope,
computed,
watch
} from "vue"
const scope = effectScope()
scope.run(() => {
const doubled = computed(
() => state.count * 2
)
watch(
() => state.count,
() => {
// react to changes
}
)
})
scope.stop() Migration No migration is required. effectScope() is primarily useful for reusable composables and libraries that need explicit control over groups of reactive effects.
Vue 3.2 expands server-side rendering APIs with renderToWebStream() for environments that support the Web Streams API.
import {
renderToWebStream
} from "@vue/server-renderer"
const stream =
renderToWebStream(app) Migration No migration is required. The streaming API can be adopted by SSR runtimes that support Web Streams.
Vue 3.2 includes major reactivity performance improvements, reducing overhead in dependency tracking and reactive effect execution.
Migration No migration is required. Existing applications receive the reactivity performance improvements after upgrading.
Vue 3.2 improves template compiler performance, reducing compilation costs for templates and Single-File Components.
Migration No migration is required. Applications and build tooling benefit automatically after upgrading.
Vue 3.2 includes runtime optimizations that reduce memory usage and improve performance when creating and updating component trees.
Migration No migration is required. The runtime optimizations apply automatically after upgrading.
Vue 3.2 improves server-side rendering support, including an ESM-bundler build of @vue/server-renderer for better integration with modern build tools.
Migration No migration is required for most applications. SSR tooling and frameworks can use the improved server-renderer packaging with modern ESM-based build pipelines.