Vue.js 3 and Composition API — Reactive and Scalable Web Development for Modern Applications

Are you stuck with a Vue 2 project whose logic is duplicated everywhere? Or starting a new frontend and wondering whether Vue 3 with Composition API beats React or Angular? At Meteora Web we've been using Vue 3 in production since its release and before that Vue 2. We've seen projects grow, migrate, and occasionally stall. This pillar page gives you everything you need to master Vue.js 3 and Composition API from a real-world perspective: costs, benefits, patterns, and working code.

What changed between Vue.js 3 and Vue 2? Why switch to the new standard?

Vue 3 is a complete rewrite with 40–50% better performance (new virtual DOM, smarter compiler). The most notable addition is the Composition API, but there's more: Teleport, Suspense, Fragments, better TypeScript support, and Vite as default build tool.

Is Vue 3 backward compatible?

No, there are breaking changes. Most Vue 2 options still work, but some global APIs have changed and lifecycle hooks are renamed. Migration requires testing.

Composition API vs Options API: which one for your project?

Options API is fine for simple components. Composition API (setup()) lets you organize logic by feature, not by option. Use Composition API for complex components, shared logic, TypeScript, and any scalable application. At Meteora Web we use it for every new component, even small ones.

How to use ref, reactive, computed, and watch in Vue 3?

import { ref, reactive, computed, watch } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Mario', age: 30 })
const double = computed(() => count.value * 2)
watch(count, (newVal, oldVal) => console.log(newVal, oldVal))

Pinia: modern state management for Vue 3

Pinia replaces Vuex. Simpler, TypeScript-ready, with devtools. Example store:

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: { total: (state) => state.items.reduce((s,i) => s + i.price, 0) },
  actions: { addItem(item) { this.items.push(item) } }
})

Vue Router 4: lazy loading and navigation guards

Lazy load routes with dynamic imports. Use global guards for auth. Example that redirects to login if not authenticated:

router.beforeEach((to, from) => {
  const isLoggedIn = useAuthStore().isLoggedIn
  if (to.meta.requiresAuth && !isLoggedIn) return '/login'
})

Nuxt 3: SSR, SSG, and hybrid rendering with Vue

Nuxt 3 offers server-side rendering for SEO, static site generation for speed, and hybrid page-by-page. We use it for e-commerce and corporate blogs. But stick to Vue 3 + Vite for simple SPAs.

Vue with TypeScript: typing components and stores

Use defineComponent, defineProps, and defineEmits for full type inference. Pinia stores are auto-typed. This reduces runtime bugs – we saw a 30% drop in production issues after adopting TypeScript with Vue 3.

Composables in Vue 3: reusable logic like React custom hooks

Composables are functions that use the Composition API. Example useCounter:

export function useCounter(initial = 0) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
}

Testing with Vitest and Vue Test Utils

Vitest is a Vite-native test runner. Example test for a button click:

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter', () => {
  it('increments on click', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('1')
  })
})

Teleport, Suspense, and advanced built-in components

Use Teleport to move markup (e.g., modals) to a different DOM node. Suspense handles async components. KeepAlive preserves component state. Transition for animations.

What to do next

1. Start a small project with npm create vue@latest and choose Composition API + TypeScript. Follow the official guide.
2. Replace Vuex with Pinia in your next project. See Pinia docs.
3. Create a composable from repeated logic (e.g., data fetching).
4. Set up Vitest and test a critical component.
5. Evaluate Nuxt 3 if your project needs SEO or SSR.

Need help migrating from Vue 2 or building a new Vue 3 app? Contact Meteora Web – we work with clients across Italy.