Skip to content

← Writing

engineering

Vue 3 Lands: Composition API First Impressions

· Jerwin Arnado

Archive note: this is a backdated post, written years later while rebuilding this site. It’s dated to the moment it covers, but the hindsight is real.

On September 18, after years of development and over 2,600 commits, Vue 3.0 — codename “One Piece” — shipped. As someone whose daily work is largely Laravel on the back, Vue on the front, this is the release I’ve been waiting on. First impressions after some hands-on time.

The headline: Composition API

Vue 2’s Options API organizes code by kind — all data here, all methods there, computed somewhere below. Fine for small components; painful when one component contains three features, each smeared across all the option blocks.

The Composition API flips the axis: organize by feature.

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

export default {
  setup() {
    const patients = ref([])
    const search = ref('')

    const filtered = computed(() =>
      patients.value.filter(p => p.name.includes(search.value))
    )

    onMounted(async () => {
      patients.value = await fetchPatients()
    })

    return { patients, search, filtered }
  }
}

Everything about the patient list lives together, and — the real win — it can be extracted into a usePatients() composable and reused across components. This is the proper answer to mixins, which always felt like inheriting from a ghost: properties appear in your component and you have no idea where from.

Honest take: ref vs reactive, and remembering .value, is the new learning curve. My rule so far — ref for everything, reactive rarely — keeps me out of trouble. And importantly, the Options API isn’t deprecated. Existing brains and existing components keep working. Composition is opt-in, which is the most Vue way possible to ship a revolution.

The rest of the release

  • Performance: new compiler does smarter tree-flattening and patch flags; smaller and faster across the board, plus better tree-shaking — features you don’t import don’t ship.
  • Fragments: multiple root nodes per template. Goodbye, pointless wrapper <div>s.
  • Teleport: render a modal into <body> from deep inside the tree, declaratively. Modals and Laravel admin panels are about to get cleaner.
  • TypeScript: the whole framework is rewritten in TS, and it shows in the editor experience even for plain JS users.
  • Vite: Evan You’s new dev server side-project uses native ES modules for near-instant startup and HMR. Keep an eye on this one — it feels like the future of frontend tooling, not just a Vue accessory.

Should a Laravel + Vue team upgrade today?

Not yet, for most. The honest blockers, as of this week: Vuex 4 and Vue Router 4 are still in RC, Nuxt is on Vue 2, and major UI libraries (Vuetify especially) need time. The v-model and filters breaking changes mean real migration work on big codebases.

My plan: new green-field components and experiments on Vue 3 now, production apps wait for the ecosystem to catch up — likely well into 2021. But the direction is clearly right. Vue 2 made frontend approachable for backend-heavy devs like me; Vue 3 makes the big-app problems tractable without losing that.

One Piece, indeed. The treasure was composables all along.