Vue 3.2 Script Setup

Posted on  by admin

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. 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:. We can also remove the return at the end:all the top-level bindings declared inside a script setup (and all imports)are automatically available in the template.So here ponyImageUrl and clicked are available without needing to return them.

Not the answer you're looking for? Browse other questions tagged typescriptfirebasevue.jsvuejs3vue-composition-api or ask your own question.

This is the same for the components declaration!Importing the Image component is enough,and Vue understands that it is used in the template:we can remove the components declaration.

We’re nearly there: we now need to migrate the props and emits declarations.

Vue offers a defineProps helper that you can use to define your props.It’s a compile-time helper (a macro), so you don’t need to import it in your code:Vue automatically understands it when it compiles the component.

defineProps returns the props:. defineProps receives the former props declaration as a parameter.But we can do even better for TypeScript users! defineProps is generically typed:you can call it without a parameter,but specify an interface as the “shape” of the props.No more horrible Object as PropType to write!We can use proper TypeScript types,and add ?

to mark a prop as not required 😍. We lost a bit of information though.In the previous version, we could specify that isRunning had a default value of false.To have the same behavior, we can use the withDefaults helper:. The last remaining syntax to migrate is the emits declaration.

Vue offers a defineEmits helper, very similar to the defineProps helper.defineEmits returns the emit function:. Or even better, with TypeScript:. The full component declaration is 10 lines shorter.Not a bad reduction for a ~30 lines component!It’s easier to read, and plays better with TypeScript.It does feel a bit weird to have everything automatically exposed to the template,without writing return though, but you get used to it.

There is a more subtle difference between the two ways to declare components:a script setup component is “closed by default”.This means other components don’t see what’s defined inside the component.

For example, the Pony component can access the Image component(by using refs, as we’ll see in a following chapter).If Image is defined with defineComponent,then everything returned by the setup function is also visible for the parent component (Pony).If Image is defined with script setup,then nothing is visible for the parent component.Image can pick what is exposed by adding a defineExpose({ key: value }) helper.Then the exposed value will be accessible as key.

This syntax is now the recommended way to declare your components,and it’s awesome to use! Our ebook, online training and training are up-to-date with these changes if you want to learn more! Please enable JavaScript to view the comments powered by comments powered by Disqus.

Modified5 months ago. I'm trying to use the Vue 3.2