What is Vue 3 Script Setup??

If you've been working in Vite with Vue 3 recently, you'll notice that when you start a new project, your script section looks a little different because it has a script setup method.

What is this?

The script setup syntax is a proposed change in the Vue's Git RFCs. It's is not intended to completely replace any of the current ways to write code. Its purpose is to provide developers with a more concise syntax to write their single file component's script code.

In this video, we're going to be taking a look at exactly how it works and some of the ways that it can be useful.

FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS

follow me on twitter:

INTRO
Daily (Prod. by Lukrembo)

[sven_]

I don't know why it wasn't like this from the start. No weird setup functions and createApp, you just do the things you need to do. Glad I didn't learn Vue earlier.

[jntaca]

I'm using it in production. It simplified A LOT my work.

[starkid]

It drives me crazy when any tutorials from the past 2 years don't use <script setup>

[jessietaylorGrayMatterForge]

i would like to see docs for the useContext function, it's the one no one seems to expand on in their tuts

[andogrando]

When using defineProps and defineEmits you don't actually need to import them - just an interesting point if you're looking to lean out a component a bit more

[tmbarral]

And then they realised that having 2 scripts was cumbersome so they added defineOptions….
Until some point they realised all scripts now are setup and the setup attribute is no more needed…..
It would have been great that someone think this through from the beginning….
Ok, not that important, I agree. But it gave a feeling of a lack of thinking ( and foreseeing)

[nickhu]

Some years age I had to look for tutorials and examples made for Vue 3 and not Vue 2 (it was a very few hits when I started learning)
- then had to filter out that are not using composition api. (it was a nightmare)
- now I am looking for those that use <script setup> syntax (it is still a very few hits )

[theomegamale]

Script setup is what we have been waiting for in vue since day 1.

[susmoysengupta]

Amazing. I would like to see a video on Infinite scroll w/ vue...

[averagedev]

After a year of using only Vue with TypeScript for my apps and using only the script setup i can tell you that my app development time was cut in half compared to react. Also vue uses regular html and not the broken ass JSX / TSX i hate a lot. Even tho Vue is newer there is a lot more libraries for various things that can half the amount of time. Infinte scroll, graphs for admin panels etc

[matanon]

Your videos are so helpful ❤ MANY THANKS!

[bunyaminmercan]

Hi. Just wonder that which software/tools you used to making youtube videos?

[Troy-olfk]

This is useful to me, I always forget to return properties or methods that I just added

[akash-kumar]

Thanks man, coming back to use Vue3 after a long time I was a bit confused with the setup in script this video cleared my doubt.

[ashfaqrobin]

When i use setup in script tag to create a component vscode gives error like "this file does not have default export" whenever i try to use this component in another component. Why is this not working?

[Tuguldur]

Will it become official syntax or will it stay expirimental?