Vue.js 3 Preview — What's Coming and How to Prepare

Vue.js has steadily grown into one of the most popular JavaScript frameworks, loved by developers for its gentle learning curve and pragmatic design philosophy. Now, Vue 3 is on the horizon -- currently in beta with a stable release expected later this year -- and it represents the most significant evolution of the framework since its inception.

At StrikingWeb, we have been following Vue 3's development closely and experimenting with the beta releases in internal projects. Here is our breakdown of the major changes and how you can start preparing your existing Vue 2 applications for migration.

The Composition API

The biggest headline feature in Vue 3 is the Composition API, a new way to organise component logic that complements (not replaces) the existing Options API. If you have worked with React Hooks, the motivation is similar: as components grow in complexity, related logic gets scattered across different lifecycle hooks, computed properties, methods, and watchers. The Composition API lets you group related functionality together.

Here is a simple example comparing the two approaches:

Options API (Vue 2 Style)

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Composition API (Vue 3 Style)

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    const increment = () => count.value++

    return { count, doubled, increment }
  }
}

The Composition API shines in larger components where you need to organise complex logic. Related state, computed values, and methods can be grouped together and even extracted into reusable composition functions (composables). This dramatically improves code reuse and testability compared to mixins, which suffer from naming conflicts and implicit dependencies.

Performance Improvements

Vue 3's virtual DOM has been completely rewritten, and the performance gains are substantial. The new compiler analyses templates at build time and generates optimised rendering code. Key improvements include:

• Static tree hoisting: Elements that never change are hoisted out of the render function, reducing the work the virtual DOM needs to do on each update.
• Patch flag optimisation: The compiler marks dynamic bindings with flags that tell the runtime exactly what changed, avoiding unnecessary diffing.
• Tree-shaking: Vue 3 is modular by design. Features you do not use -- like the transition system or v-model on custom components -- are tree-shaken out of your production bundle.
• Proxy-based reactivity: Vue 3 replaces Object.defineProperty with ES2015 Proxy for its reactivity system, which is faster and eliminates Vue 2's known caveats around array mutation and adding new properties.

In benchmarks, Vue 3 is roughly twice as fast as Vue 2 for component mounting and updating, with significantly smaller bundle sizes. The core runtime is around 10KB gzipped -- smaller than Vue 2 despite having more features.

TypeScript Support

Vue 3 has been written from the ground up in TypeScript, which means the type definitions are always accurate and complete. The Composition API was specifically designed to work well with TypeScript -- the setup function provides natural type inference without the complex workarounds that Vue 2's Options API required.

import { ref, computed, defineComponent } from 'vue'

interface User {
  name: string
  email: string
}

export default defineComponent({
  setup() {
    const user = ref<User | null>(null)
    const displayName = computed(() =>
      user.value ? user.value.name : 'Guest'
    )
    return { user, displayName }
  }
})

If your team has been hesitant about adopting TypeScript with Vue, version 3 removes virtually all the friction. IDE support is excellent, and the developer experience is on par with what TypeScript users expect from Angular or React.

Fragments, Teleport, and Suspense

Vue 3 introduces several new features that address common pain points:

• Fragments: Components can now have multiple root nodes, eliminating the need for unnecessary wrapper divs that cluttered Vue 2 templates.
• Teleport: This built-in component lets you render a piece of a component's template in a different part of the DOM -- perfect for modals, tooltips, and notifications that need to break out of their parent's CSS context.
• Suspense: An experimental feature that provides a declarative way to handle async dependencies in a component tree, showing fallback content while data loads.

Migration Strategy

Vue 3 includes a compatibility build that supports most Vue 2 APIs, making gradual migration feasible. Here is the approach we recommend at StrikingWeb:

1. Audit your dependencies. Check which Vue 2 libraries and plugins you rely on and whether they have Vue 3 compatible versions. Major ecosystem libraries like Vue Router and Vuex are being updated for Vue 3.
2. Remove deprecated patterns. Vue 3 drops support for filters, inline templates, and the event bus pattern. Start refactoring these out of your Vue 2 codebase now.
3. Adopt the Composition API incrementally. You can use the @vue/composition-api plugin to start using the Composition API in Vue 2 today. This lets your team learn the new patterns without committing to a full migration.
4. Add TypeScript gradually. Start typing your new components and composables. Vue 3's TypeScript integration works best when you adopt it from the start rather than retrofitting it.
5. Use the migration build. When you are ready, Vue 3's compatibility build will help you identify and fix breaking changes one at a time without rewriting your entire application.

The key to a successful Vue 3 migration is preparation. Teams that start adopting Composition API patterns and removing deprecated features in their Vue 2 apps today will have a much smoother transition when the stable release lands.

Should You Wait or Start Now?

For new projects, we recommend starting with Vue 3 (currently in beta) if your timeline allows for some rough edges. The API is stable, and the core library is production-quality -- it is the ecosystem (routing, state management, UI libraries) that is still catching up.

For existing Vue 2 projects, there is no rush. Vue 2 will continue to receive security updates, and the migration path is designed to be gradual. Start preparing by cleaning up deprecated patterns and experimenting with the Composition API, but plan your migration for after the ecosystem has matured.

At StrikingWeb, we are excited about the direction Vue 3 is taking. The performance improvements, TypeScript support, and Composition API represent a significant leap forward, and we believe Vue 3 will strengthen its position as one of the best choices for building modern web applications.