Photo by Safar Safarov on Unsplash

Building the Same Component in Vue2 vs. Vue3

With the release of Vue3 coming soon, many people are wondering “What’s different in Vue2 vs. Vue3?”

Matt Maribojoc
7 min readFeb 25, 2020

Although we’ve written articles before about the biggest changes coming, we haven’t really taken a deep look at exactly how our code will change. So to show these changes, we’re going to build a simple form component in both Vue2 and Vue3.

By the end of this article, you’ll understand the main programming differences between Vue2 and Vue3 and be on your way to becoming a better developer.

If you want to know how to build your first Vue3 app, check out our beginners’ Vue3 Alpha app guide.

Alright — let’s go!

Creating our Template

For most components, the code will be very similar, if not identical, in both Vue2 and Vue3. However, Vue3 has support for Fragments, meaning that components can have more than one root node.

This is especially useful when rendering components in a list to remove unnecessary wrapper div elements. However, in this case, we’ll keep a single root node for both versions of our Form component.

<template>
<div class='form-element'>
<h2> {{ title }} </h2>
<input type='text'

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Responses (11)

What are your thoughts?

Maybe is me but I really dislike the new format. The one before is so much clearer to read, and easier to understand. That’s my personal opinion.
Vue2 gives some logical Cuneo where one has to work vs Vue3 wraps up all in the setup method. I dislike…

--

I feel that this article really misinterprets the reasoning behind the new API. One thing is the migration from Vue 2 to Vue 3, which both have (mostly) the same api that we’re all used to. Another thing is the Composition API, which is a new syntax…

--