Original subtitles

In this lecture, we're going to finish our discussion of the Composition API by looking at a syntactic

feature by compiling our project with vite.

We have access to a special attribute to simplify the composition API.

Let's open the app component file.

On the script.

BLOCK Add an attribute called setup.

By adding this attribute code written inside the script block will be wrapped by the setup function.

That means we don't have to export an object, nor do we need to add the setup function.

We can safely remove the export statement.

Do not remove the inner contents of the object.

Next, remove the name components and setup properties.

However, do not remove the inner contents of the setup function.

You may need to format your code after doing so.

Remove the return statements.

Voila.

We're finished.

We do not need to return values.

View will automatically export the variables and functions defined from the block.

Our template will continue to have access to everything.

What about the components and import statements?

If we import a component, it will automatically be registered with the current components.

For example, the app alert component will remain functional from within the templates.

As for the import statements, they'll be moved outside of the setup function.

Behind the scenes view handles the complexities.

This feature simplifies the composition API further.

However, there is one problem in the template.

We're using an expression to output the name.

However, this property does not exist in the script block.

It does exist with the user object.

In an earlier lecture, we converted the reactive object into separate refs to fix this issue.

We must explicitly define a variable at the bottom of the block called the two refs function with the

user object.

The structure of the return value for the name property.

By explicitly defining the variable, it will be returned by the function.

The name property will be accessible from within the templates.

Let's try testing our code by refreshing the page.

Great.

Our component is entirely functional.

We can perform the same actions as before.

For example, we can type in the input or press the buttons.

Everything works.

That wraps up our discussion of the composition API.

I hope you enjoyed it.

In the next section, let's explore some more features of you.