How to migrate from Vue 2 to Vue 3

01-package.json.js

// package.json

{

  // ...

  "dependencies": {
      "vue": "^3.2.0", // UPDATE
      "@vue/compat": "^3.2.0" // ADD
      // ...
  },
  "devDependencies": {
      "@vue/compiler-sfc": "^3.2.0" // ADD
      "vue-template-compiler": "^2.6.0" // REMOVE
      // ...
  }
}

02-webpack.config.js

// webpack.config.js

module.exports = {

  // ...

  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            compatConfig: {
              // Default everything to Vue 2 behavior
              MODE: 2
            }
          }
        }
      }
    ]
  }
}

03-vue2-named-and-scoped-slots.vue

<template>
  <CustomDialog>
    <template slot="heading" slot-scope="slotProps">
      <h1>Items ({{ slotProps.items.length }})</h1>
    </template>
  </CustomDialog>
</template>

03-vue3-named-and-scoped-slots.vue

<template>
  <CustomDialog>
    <template #heading="slotProps">
      <h1>Items ({{ slotProps.items.length }})</h1>
    </template>
  </CustomDialog>
</template>

04-vue2-functional-attributes.vue

<template functional>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
  }
}
</script>

04-vue3-functional-attributes.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
  }
}
</script>

05-vue2-vif-combined-with-vfor.vue

<template>
  <div 
    v-if="list"
    v-for="item in list"
    :key="item.id"
    :title="item.title">
      {{ item.title }}
  </div>
</template>

05-vue3-vif-combined-with-vfor.vue

<template>
  <template v-if="list">
    <div 
      v-for="item in list"
      :key="item.id"
      :title="item.title">
        {{ item.title }}
    </div>
  </template>
</template>

06-vue2-vif-branched-keys.vue

<template>
  <ul>
    <li v-for="item in list">
      <p v-if="item.amount < 10" :key="item.id">{{ item.title }}</p>
      <p v-else class="high" :key="item.id">{{ item.title }}</p>
    </li>
  </ul>
</template>

06-vue3-vif-branched-keys.vue

<template>
  <ul>
    <li v-for="item in list">
      <p v-if="item.amount < 10">{{ item.title }}</p>
      <p v-else class="high">{{ item.title }}</p>
    </li>
  </ul>
</template>

07-vue2-vfor-keys-in-template.vue

<template>
  <template v-for="item in list">
    <div :key="item.id">{{ item.title }}</div>
  </template>
</template>

07-vue3-vfor-keys-in-template.vue

<template>
  <template v-for="item in list" :key="item.id">
    <div>{{ item.title }}</div>
  </template>
</template>

08-vue2-transition-classes.scss

<style lang="scss">
  .v-enter,
  .v-leave-to {
    opacity: 0;
  }

  .v-leave,
  .v-enter-to {
    opacity: 1;
  }
</style>

08-vue3-transition-classes.scss

<style lang="scss">
  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }

  .v-leave-from,
  .v-enter-to {
    opacity: 1;
  }
</style>

09-vue2-app-initialization.ts

import Vue from 'vue';
import App from 'views/app/app.vue'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

09-vue3-app-initialization.ts

import { createApp } from 'vue';
import App from 'views/app/app.vue'

const app = createApp(App);
app.mount('#app');

10-vue2-global-api.ts

import somePlugin from 'plugins/some-plugin'
import someDirective from 'directives/some-directive'

Vue.use(somePlugin);
Vue.directive('some-directive', someDirective)

10-vue3-global-api.ts

import somePlugin from 'plugins/some-plugin'
import someDirective from 'directives/some-directive'

app.use(somePlugin);
app.directive('some-directive', someDirective)

11-vue2-extend-and-util.vue

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    //
  })
</script>

11-vue3-extend-and-util.ts

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    //
  })
</script>

12-vue2-adding-global-instances.ts

Vue.prototype.$title = 'Some title'

12-vue3-adding-global-instances.ts

app.config.globalProperties.$title = 'Some title'

13-vue2-reactive-property-setters.ts

// set
Vue.set(state.moduleName, 'keyName', 'value')
vm.$set(state.moduleName, 'keyName', 'value')

// delete
Vue.delete(state.moduleName, 'keyName', 'value')
vm.$delete(state.moduleName, 'keyName', 'value')

13-vue3-reactive-property-setters.ts

// set
Object.assign(state.moduleName, { keyName: 'value' })

// delete
delete state.moduleName.keyName

14-vue2-$nextTick-deprecated.vue

<script lang="ts">
  this.$nextTick(() => {
    // something DOM-related
  })
</script>

14-vue3-$nextTick-deprecated.vue

<script lang="ts">
  import { nextTick } from 'vue'

  nextTick(() => {
    // something DOM-related
  })
</script>

15-vue2-lifecycle-hooks.vue

<script lang="ts">
  export default {
    beforeDestroy() {
      console.log('Before component unmounts!')
    },

    destroyed() {
      console.log('Component unmounted!')
    },
  }
</script>

15-vue3-lifecycle-hooks.vue

<script lang="ts">
  export default {
    beforeUnmount() {
      console.log('Before component unmounts!')
    },

    unmounted() {
      console.log('Component unmounted!')
    },
  }
</script>

16-vue3-events-must-be-declared.vue

<script lang="ts">
  export default {
    emits: ['click'],

    methods: {
      onTitleClick(title) {
        this.$emit('click', title)
      }
    }
  }
</script>

17-vue2-lifecycle-events.vue

<template>
  <MyComponent @hook:mounted="foo">
</template>

17-vue3-lifecycle-events.vue

<template>
  <MyComponent @vnode-mounted="foo">
</template>

18-vue2-vmodel-prop.vue

<template>
  <CustomComponent v-model="title" />
</template>

18-vue3-vmodel-prop.vue

<template>
  <CustomComponent v-model:value="title" />
</template>

19-vue2-vmodel-event.vue

<script lang="ts">
  export default {
    methods: {
      updateTitle() {
        this.$emit('input')
      }
    }
  }
</script>

19-vue3-vmodel-event.vue

<script lang="ts">
  export default {
  
    // Don't forget to list the event in the 'emits' option
    emits: ['update:modelValue'],

    methods: {
      updateTitle() {
        this.$emit('update:modelValue')
      }
    }
  }
</script>

20-vue2-syncing-a-prop.vue

<template>
  <ChildComponent v-model="active" :title.sync="pageTitle" />
</template>

20-vue3-syncing-a-prop.vue

<template>
  <ChildComponent v-model="active" v-model:title="pageTitle" />
</template>

21-vue3-directives-final-api.ts

const MyDirective = {
  created(el, binding, vnode, prevVnode) {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
}

22-vue2-custom-directives.ts

bind(el, binding, vnode) {
  const vm = vnode.context
}

22-vue3-custom-directives.ts

mounted(el, binding, vnode) {
  const vm = binding.instance
}

23-vue2-filters.vue

<template>
  <p>{{ user.lastName | uppercase }}</p>
</template>

23-vue3-filters.vue

<template>
  <p>{{ uppercasedLastName }}</p>
<template>

<script lang="ts">
  export default {
    computed: {
      uppercasedLastName(): string {
        return this.user.lastName.toUpperCase()		
      }
    },

    // or alternatively
    // {{ uppercaseText(user.lastName) }}
    methods: {
      uppercaseText(text: string) {
        return text.toUpperCase()		
      }
    }
  }
</script>

24-vue2-is.vue

<template>
  <button is="someComponent" />
</template>

24-vue3-is.vue

<template>
  <component is="someComponent" />
</template>

25-vue3-vmon-vmoff-vmonce-mitt.ts

// e.g. in app.ts
import mitt from 'mitt'

const emitter = mitt()
app.config.globalProperties.$emitter = emitter 

26-vue2-vmon-vmoff-vmonce.ts

this.$on('clickAway', this.hidePopover)

26-vue3-vmon-vmoff-vmonce.ts

this.$emitter.on('clickAway', this.hidePopover)

27-vue2-native.vue

<template>
  <SpecialButton v-on:click.native="foo" />
</template>

27-vue3-native.vue

<template>
  <SpecialButton v-on:click="foo" />
</template>

28-vue2-vmchildren.vue

<template>
  <CustomComponent>Hello World</CustomComponent>
</template>

<script lang="ts">
  export default {
    mounted() {
      console.log(this.$children[0])
    },
  }
</script>

28-vue3-vmchildren.vue

<template>
  <CustomComponent ref="greeting">Hello World</CustomComponent>
</template>

<script lang="ts">
  export default {
    mounted() {
      console.log(this.$refs.greeting)
    },
  }
</script>

29-vue2-vmlisteners.vue

<script lang="ts">
  export default {
    mounted() {
      console.log(this.$listeners)
    }
  }
</script>

29-vue3-vmlisteners.vue

<script lang="ts">
  export default {
    mounted() {
      console.log(this.$attrs.onClick)
      console.log(this.$attrs.onMouseenter)
    }
  }
</script>

30-vue3-watching-arrays.vue

<script lang="ts">
  export default {
    watch: {
      someList: {
        deep: true,
        handler(val, oldVal) {
          console.log('list was updated')
        },
      },
    }
  }
</script>

31-vue2-async-components.ts

const MyComponent = {
  component: () => import('./MyComponent.vue'),
  // ...
}

31-vue3-async-components.ts

import { defineAsyncComponent } from 'vue'

const MyComponent = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  // ...
})

32-vue2-removing-attributes.vue

<template>
  <p :alt="false">Hello</p>
</template>

32-vue3-removing-attributes.vue

<template>
  <p :alt="null">Hello</p>
</template>

33-vue2-vuex.ts

export default new Vuex.Store<IRootState>(storeOptions)

33-vue3-vuex.ts

export default createStore(storeOptions)

34-vue2-vuerouter.ts

import Router from 'vue-router'

const router = new Router({
  // ...
})

34-vue3-vuerouter.ts

import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
})

35-vue3-new-history-option.ts

import { createRouter, createWebHistory } from 'vue-router'
// there is also createWebHashHistory and createMemoryHistory

createRouter({
  history: createWebHistory(),
  routes: [],
})

36-vue2-router-link-prop-tag.vue

<template>
  <router-link
    :tag="info.id ? 'a' : 'div'"
    :to="info.id ? { name: 'article', params: { id: info.id } } : {}"
  >
    {{ info.title }}
  </router-link>
<template>

36-vue3-router-link-prop-tag.vue

<template>
  <router-link
    v-if="info.id"
    :to="{ name: 'article', params: { id: info.id } }"
  >
    {{ info.title }}
  </router-link>
  <div v-else>{{ info.title }}</div>
</template>

37-vue3-vuex-typescript-support.ts

// vuex-shim.d.ts

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

// Your own store state
interface IMyState {
  count: number
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<IMyState>
  }
}

38-vue2-fix-typescript-support.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

38-vue3-fix-typescript-support.ts

declare module '*.vue' {
  import { defineComponent } from 'vue'
  const component: ReturnType<typeof defineComponent>
  export default component
}

39-vue2-augmenting-global-properties.ts

declare module 'vue/types/vue' {
  export interface Vue {
    $http: typeof axios
  }
}

39-vue3-augmenting-global-properties.ts

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $http: typeof axios
  }
}

vue3-vmodel-prop-alternative.vue

<script lang="ts">
  export default {
    props: {
      modelValue: String // previously was `value: String`
    },

    emits: ['update:modelValue'],

    methods: {
      changeTitle(title) {
        this.$emit('update:modelValue', title)
      }
    }
  }
</script>