Challenge: Migration from Vue 2 to Vue 3

Practice what we’ve learned about migration from Vue 2 to Vue 3.

We'll cover the following

Problem statement

Vue 3 was released in 2020, and it’s time to upgrade our Vue 2 project to take advantage of the new features added in the latest version. Your task is to migrate a project from Vue 2 to Vue 3.

Challenge

You’re provided with a Vue 2 project created using Vue-CLI. Your task is to migrate a form from Vue 2 code to Vue 3. The app is a simple login form that utilizes some features with breaking changes. It consists of two input fields: email and password. The form has a very simple validation that verifies that the fields were filled in.

Four files need to be updated:

  • src/main.js
  • src/components/Login.vue
  • src/components/LoginForm.vue
  • src/components/BaseInput.vue

Features to migrate:

  • .sync modifier
  • v-model
  • $listeners
  • Vue app creation

You only need to update the code. There’s no need to modify/upgrade any dependencies, because, for the sake of the challenge, the project is set up with Vue 3, and only the starter code is written for Vue 2.

Get hands-on with 1400+ tech skills courses.