Migration from Vue-2 to Vue-3

ifykyk!!

Yeah yeah i know you got stuck!! let’s check what will be the issue.

Vue has stopped maintaining support for vue 2.x after 31st December 2023. All projects can still work but they won’t get any new features added or bugs will not be resolved, so if you are starting a new one it’s a better to start with vue 3 and it’s recommended to use Recommendations given by Vue itself.

Now, let’s check what are the changes that are going to be breaking in the vue 3 and you need to be careful while upgrading dependencies

• Global Vue API : Is now tree-shakable, meaning unused parts are automatically removed during build, reducing bundle size.

Vue 2 :

import Vue from 'vue';

Vue.component('my-component', { /* ... */ });

Vue 3 :

import { createApp } from 'vue';

const app = createApp(/* ... */);
app.component('my-component', { /* ... */ });

• Components : Functional components must be created using a plain function, instead of the object-based syntax used in Vue 2.

Vue 2 :

const MyComponent = {
  functional: true,
  render(h) {
    return h('div', this.$slots.default);
  }
};

Vue 3 :

const MyComponent = (props, context) => {
  return <div>{context.slots().default}</div>;
};

• Template Directives : v-bind now accepts an object as the argument, replacing the separate v-model and v-on directives. Some directives, like v-if and v-for, have slightly changed behavior.

Vue 2 :

<input v-model="message" @input="handleInput">

Vue 3 :

<input v-bind="{ modelValue: message, onInput: handleInput }">

• Other Changes : The $listeners property has been removed from components and is now accessible through $attrs. Custom events are now handled differently.

These are the major breaking changes and there are many more to be taken care of. If you are migrating your project from 2.x to 3 you should once refer this docs from vue.

Vue migration breaking changes