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

It looks much more cleaner, gotta give a try

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?