Vue3 Script Setup This

Posted on  by admin

Modified3 months ago. I use Vue 3.1.1. I am using script setup in the experimental stage with single file components.Using the script setup, I understand defineProps, defineEmit, and useContext, but I don't understand how to use the render function.

6666 bronze badges. Try to use the h function to create your element then render it inside the template section as follows :.

  • 1414 gold badges106106 silver badges132132 bronze badges.
  • 132132 bronze badges. You may try an extra normal script.
  • Any data, methods except the props should be exposed using defineExpose.
  • BTW, setup script and normal script should have the same lang attribute.


< script setup > is a new syntax sugar from Vue3.

  • The type is the suggestion in Vue's Git RFC. It should be made clear that this is not intended to completely replace any current writing.
  • Its purpose is to provide developers with more concise syntax and simplify the lengthy template code when using the Composition API to write its single file component.

Without using < script setup >, our code is:. When we need to import a component, we not only need to import it explicitly in the file header, but also need to add a declaration in the components field.

Moreover, if the variables declared in the setup need to be used by the template, they need to be returned explicitly at the end of the setup.

If your component template uses few variables, this situation can be reluctantly accepted.

However, when the variables and methods gradually increase, it is undoubtedly a boring thing to return after setup every time.

You will also face great challenges when refactoring the code.

To solve this problem, vue3 added script setup syntax. After using < script setup >, the same function is realized.

Migrate a component

The code is as follows:. Not only the data, calculation attributes and methods, but also the instructions and components can be automatically obtained in our template, which is very magical.

A rundown of script setup

To make a long story short, this syntax makes a single file component simpler. In the original words of the RFC, "the main goal of this proposal is to reduce the verbosity of the use of the Composition API within SFC by directly exposing the context of < script setup > to the template."

And there you have it!

This is what we just saw. We don't need to care about the value returned in the setup method (because sometimes we should forget to return the value we need in the setup, so the template can't get the corresponding value).

We can simplify the code. In script setup, component import is automatically registered:.

  • The component registration step is omitted, and there is no explicit action to export variables.
  • Props needs to be defined by using defineProps.
  • The usage is similar to that of props before.
  • Emit uses defineEmit to define events that a component can emit. useContext accesses the slots and properties of the component.
  • defineProps/defineEmit will make simple type inference based on the passed value. Define props – as the name suggests, it allows us to define props for components;.
  • Define emits – defines the events that a component can emit. useContext – the slots and properties of the component can be accessed.
  • Instructions are the same as components.
  • They are automatically registered when imported. The default value is true.

In this case, the attribute bindings of the parent scope that are not recognized as props will be "fallback" and applied to the root element of the child component as an ordinary HTML attribute.

Implicit return

If await is used, it needs to be used with suspend asynchronous component. Volar is a vscode plug-in to enhance the vue writing experience.

Using volar plug-in can get the best support for script setup syntax.

  • To learn more about script setup, click?? Added by e11rof on Wed, 09 Mar 2022 03:49:19 +0200.
  • 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.

Closed by default and defineExpose

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.