Vue Script Setup Props

Posted on  by admin
In this Vue tutorial we learn an easier way to use the Composition API in components with the script setup.

We cover the lack of config object, how to use components, props and events and event data. How to send events with the script setup. If you want to follow along with the examples, you will need to create an app generated by the Vue CLIas well as the following extra component.

The project should look similar to the following. TheGreetingMessagecomponent will have a paragraph with a simple greeting. The script setup is a different way for us to use the Composition API in components.

Basically, we don’t need to use the config object and itssetupoption. We can opt-in to the script setup by simply adding thesetupproperty to the script block’s tag.


One of the great things about the script setup is that we need a lot less boilerplate. As an example, let’s consider the following.

In the example above, we need the config object, thesetupoption and we need to return the “name” ref from it to be used in the template.

With the script setup block, we only need the ref and its import for it to work. A component only needs to be imported to be available, we don’t have to register it like we did before. As an example, let’s import ourGreetingMessagecomponent into the root App component and invoke an instance of it in the template.