DEV Community

Cover image for Feature: Vue 3 script setup

Feature: Vue 3 script setup

Alexandru Ghiura on October 16, 2020

I have been doing a lot of Vue.js in the last 6 months and I need to say Vue is awesome. I am coming from “React ❤️ world” but with the release of...
Read full post
Collapse
 
dennila2 profile image
Denni •

Hi Alexandru
Thanks for you post!

In vue-2 I set component name like this:

<script> const name = 'App'; export default { name, }; </script>
Enter fullscreen mode Exit fullscreen mode

How can i set component name with 'vue-3 setup syntax?

Collapse
 
ghalex profile image
Alexandru Ghiura •

You can still export default the component:

<script setup="props"> // ... other logic here export default { name: 'ComponentName', }; </script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dennila2 profile image
Denni •

What if I want use imported components in SFC?

Collapse
 
ghalex profile image
Alexandru Ghiura •

Hi Denni,

A good question, here is an example:

<script setup> export { default as Foo } from './Foo.vue' export { default as Bar } from './Bar.vue' export const ok = Math.random() </script> <template> <Foo/> <Bar/> <component :is="ok ? Foo : Bar"/> </template>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dennila2 profile image
Denni •

Hi Alexandru,
thank you!

Collapse
 
bairrada97 profile image
bairrada97 •

What if we want pass arguments on setup?

Collapse
 
ghalex profile image
Alexandru Ghiura •

If you ask how to use emit and other args you pass to setup() function here is an example:

<script setup="props, { emit }"> // call emit() here </script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
bairrada97 profile image
bairrada97 •

good thats what I wanted to know, thanks

Collapse
 
defucc profile image
DeFUCC •

What about defining emits used in the template with $emit('eventName')? I've found the function defineEmit(), but can't figure out how to use it...

Collapse
 
jjclxrk profile image
jjclxrk •

If anyone else is stuck on this too, I eventually found the answer here: github.com/vuejs/rfcs/pull/227#iss...

const emit = defineEmit(['foo']);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dajpes profile image
dajpes •

what if I want to use async/await?

Collapse
 
bairrada97 profile image
bairrada97 • • Edited

It looks much more cleaner, gotta give a try