Solution: Migration from Vue 2 to Vue 3

Solution

The challenge required you to migrate a project from Vue 2 to Vue 3 code. These are the changes required:

For src/main.js:

• Replace the Vue Import with the createApp method and use it to initialize a Vue application. The createApp method is a factory function that returns a new Vue app instance, so it doesn’t require the new keyword.

For src/components/Login.vue:

• Replace :email.sync and :password.sync with v-model:email and v-model:password on the LoginForm component in the template.

For src/components/LoginForm.vue:

• Add an emits array to the component definition with ["update:email", "update:password", "submit"] values.

For src/components/BaseInput.vue:

• Replace the value prop with modelValue (unless you use a named v-model, like v-model:value).

• Change the value prop from :value=”value” to :value=”modelValue”.

• Remove the inputFieldListeners computed and v-on=" inputFieldListeners" from the input because they aren’t needed anymore. All additional event listeners are forwarded as part of the v-bind=" attrs".

• Add the emits array with the update:modelValue string.

Let’s run the below widget to understand how this solution works.

Note: The code below may take a while to run. When the server starts, go to the app URL and see the output.