Vue Composition API Migration Guide

Introduction

The <template> section in most components shouldn't need to change at all.

The <script lang="ts"> block will need to change to <script setup lang="ts">. The examples below should cover how to convert the various items within.

For suggestions on code organization, see Suggested Script Structure.

Examples

Essential

• Child Components
• Emitting Custom Events
• Getters
• Lifecycle Events
• Properties and Functions
• Props
• Vuex Actions and Getters
• Watchers

Supplementary

• Inheriting Attributes
• Listeners (this.$listeners)
• nextTick (this.$nextTick)
• Refs (this.$refs)
• Routing (this.$route, this.$router)
• Slots (this.$slots)

Incomplete

• Bootstrap Vue (this.$bvModal, this.$root.$emit)
• Validation (this.$v)

Documentation

• <script setup>