DEV Community

Cover image for Using script Setup for Vue 3 SFCs

Using script Setup for Vue 3 SFCs

Alvaro Saburido on February 03, 2021

A few days ago I remembered a cool feature that was part of the RFCs that made it into Vue 3 and the composition API final releases when Evan You t...
Collapse
 
alberto2000 profile image
Riccardo Lardi • Edited

Hi there, I'm getting undefined for emit as well as props when trying to import them with <script setup="props, {emit}"> as proposed. Any hint to what could be wrong? Project was created using @vitejs/app <project-name>... thanks!

Collapse
 
vukadinfe profile image
Vukadin

You can use defineProps, defineEmit and/or defineContext

twitter.com/watchmejizz/status/137...

Collapse
 
vukadinfe profile image
Vukadin

Maybe update post @alvarosaburido ?

Collapse
 
peshanghiwa profile image
Peshang Hiwa

Hi dear, thanks for the amazing article, I had a problem with accessing "this" keyword properties in this new setup as it is undefined,
ex: in my previous projects i could write this.$vuetify.themes.colors.primary,
but now i can't as "this" keyword is undefined,
how to access $vuetify?

Collapse
 
alvarosabu profile image
Alvaro Saburido

Hi there, thanks for writing. So sfc works along with the composition API, is a sugar syntax for the setup function so you will be not able to access $vuetify through this.

Check if Vuetify already supports vue 3 and composition API vuetifyjs.com/en/introduction/road...

Collapse
 
manuelojeda profile image
Manuel Ojeda

This syntax makes every component so clear to read, I love it!

Collapse
 
niuage profile image
Robin Boutros

Hey, I had no idea about that feature! Where's the official documentation about it? I dont see it mentioned in here: v3.vuejs.org/guide/composition-api...

Collapse
 
webjeroen profile image
Jeroen Boschman

Here it is mentioned as a Notable New Feature

Collapse
 
patrikbird profile image
PatrikBird

how’s your IDE/plugin setup for the way of creating components? I tried with code+vetur and it’s just complaining </p>

Collapse
 
patrikbird profile image
PatrikBird

I found an answer myself actually.
Apparently volar works?

github.com/vuejs/vitepress/pull/13...

Collapse
 
nove1398 profile image
nove1398

Great little intro documents, we need more visibility into the SFC style</p>