Vue 3 Setup

Posted on  by admin

Modified3 days ago. I am moving from Vue2 to Vue3 but couldn't manage to transfer some objects to new ref method. How do I write this with ref with types?I did some research but couldn't find much.

How to Use the Setup Function

Started like this but it gives type errors: (No overload matches this call). My ContractSetsType:. Should I use reactive instead of ref? sunflower seedsunflower seed.

How to send data with events

Your ContractSetsType is different from below. You have to match the type:.

to work, you could change interface Contract to have everything optional.

Vue 3.2 introduced the script setup syntax,a slightly less verbose way to declare a component.You enable it by adding a setup attribute to the script element of your SFC,and you can then remove a bit of boilerplate in your component.

New and Improved Way: Vue 3 Composition API

Let’s take a practical example, and migrate it to this syntax! The following Pony component has two props (the ponyModel to display, and a isRunning flag).Based on these two props, a URL is computed for the image of the pony displayed in the template(via another Image component).The component also emits a selected event when the user clicks on it.

As a first step, add the setup attribute to the script element.Then, we just need to keep the content of the setup function:all the boilerplate can go away.You can remove the defineComponent and setup functions inside script:.