So the idea here is to export our variables and methods directly here, so we don't have to return it at the end of the setup method here. And this is also convenient because, as you've seen, it's very easy to forget to return what you want. So let's go into our application here, the one we built for the Composition API, and let's convert this over to Script Setup. So let's go down here to the script. And the first step is to define a setup attribute here, so let's say Script Setup. And then everything that is not in the setup method, so in our case, the props declaration here, can remain within the export default.

And then everything that is not in the setup method, so in our case, the props declaration here, can remain within the export default. But everything else can go outside of the export default. So let's go ahead and grab everything within the setup method. So all of this, all of this, and everything except the return value. And let's cut that out. And I guess we don't need the return value as well, so let's remove that. And let's paste it here, so the imports remain the same. But now we have to put the export keyword before all of these declarations. So let's do that.

So now remember, we took the props in as a parameter here. So to do that within this way, we can set it up like this. So let's say props. And you can even destructure other things you want imported. Say you want to make use of the emit function. You can do that as well like this. Okay. And now let's get rid of the setup method since we exported everything now. So let's get rid of this. And hopefully I did everything correctly.

This is just a simple explanation with no code.

Cool. So again, just a slightly cleaner way of using the composition API. And it shortens it a bit because we don't have to return everything we want available in the template. So the next thing I want to take a look at is style variables. So the idea here is you can define state or variables in your JavaScript and use it as CSS variables in your CSS or in your style tag. So let's go ahead and do this. So I'll make use of a color variable. So I'll just put it somewhere up here and I'll make it a ref.

So let's add a div with a class of text and see if this works. So I'll put it up here, right above the title and say, hello there. And let's see if this works. And there you go. You see red text here. So now we have control over our CSS directly within our JavaScript. So that can be pretty handy. So let me just come up with a simple example here. So I'll make an input and let's give it a class so we can see it. Say border, border, gray, 400 and skip some padding.

So I'll make an input and let's give it a class so we can see it. Say border, border, gray, 400 and skip some padding. Okay. And let's put a v-model on this so we can say color. And now as we type into this input box, this color should change. So if you want to change the blue, changes to blue and green and so on and so forth. So really easy to manipulate your CSS within JavaScript. So yeah, if these features look useful to you, definitely check out script setup and style vars.