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
 
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
 
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
 
dajpes profile image
dajpes •

what if I want to use async/await?

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
 
bairrada97 profile image
bairrada97 • • Edited

It looks much more cleaner, gotta give a try