Vue2 to Vue3 Upgrade.
Tags: vue, webdev, programming, javascript
Published: 2023-10-05 01:13:31

---
title: Vue2 to Vue3 Upgrade.
published: true
description: One of our projects underwent an upgrade from Vue2 to Vue3. Here are some key areas to focus on during the upgrade.
tags: #Vue #webdev #programming #javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-04 23:50 +0000
---
![Vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpqjin2rk5v41jqsvcbn.png)
Upgrading from Vue 2 to Vue 3 involves several code changes and updates, as Vue 3 introduced some significant changes and improvements. Below are the key code changes you'll need to make for a Vue 2 to Vue 3 upgrade:  
<br>

##-- Vue Composition API:  
Vue 3 introduces the Composition API, which allows you to organize your component logic more modularly. You should refactor your components to use the Composition API when appropriate. Here's an example of the Composition API:

![vue-composition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79xing3wbl6gatlqpc0k.png)
<br>


##-- Props Declaration:
In Vue 3, you should explicitly declare props using the props option:
![props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l3xpqu7z3bsjm7lg1df.png)
<br>

##-- Emitting Events:
In Vue 3, you should use the `emit` function to emit custom events instead of $emit:
![events](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juehh4q3yglxd84gp1va.png). 
<be>

##-- Filters:
Vue 3 removed filters. You can achieve similar functionality using methods or computed properties.
<br>


![filters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb00vtinswvi4blic7cr.png)
<br>


##-- Updated v-model:
Vue 3 replaces the `v-model` directive with v-model custom directives. You'll need to update your components accordingly if using `v-model`.
<br>

##-- Global APIs:
Some global Vue APIs have been removed or replaced. For example, you should use createApp to create an app instance instead of `new Vue({})`. Additionally, `Vue.component` has been replaced with `app.component`.

![global-api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37cejrlwukahizsugpj8.png)

<br>
##-- Transition and Animation:
Vue 3 introduces a new system for transitions and animations. If you were using `<transition>` and `<transition-group>` in Vue 2, you must adapt your code for Vue 3.
<br>
<br>
##-- Custom Directives:
Vue 3 allows custom directives to be written using the `app.directive` method.


![transition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygo58upayq6xueq0u9su.png)

<br>
##-- Scoped Slots:
Scoped slots have been replaced with the new `<slot>` and `<template v-slot>` syntax.
<br>

##-- Async Components: 
You should use defineAsyncComponent to create async components in Vue 3.

![async](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bjia3xl6mu5yowxynf9.png)
<br>
##-- Inject and Provide:
The provide and inject API has been updated to use inject as a part of setup().
<be>

These examples illustrate some fundamental code changes you must make when upgrading from Vue 2 to Vue 3. Be sure to consult the official Vue 3 documentation and migration guide for comprehensive details on specific changes and updates relevant to your project.