Feature: Vue 3 script setup

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 Vue 3 and composition API, writing code in Vue or writing code in React is pretty much the same.

What I want to share today is a RFC that will bring even more love for Vue from React world.

Welcome script setup

What is script setup ? What are we talking about here ?

We talk about a compile step for script tag to improve the authoring experience when using the Composition API inside Single File Components.

Lot’s of words 😄, let me give you an example. Let’s say we have this component:

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc,
    }
  },
}
</script>

As you can see we have our count ref and we export it to the template by return it in the setup() method.

This is pretty clear when you have few exports or one function but when the component becomes bigger and you have 10 exports or more that return becomes BIG 🤯 pretty fast.

This is where script setup can help, you don’t need to return anything or use setup function. The code looks much cleaner and nice.

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup="">
  import { ref } from 'vue'

  export const count = ref(0)
  export const inc = () => count.value++
</script>

Isn’t that a piece of beauty ? ❤️ 🤩 🥳

Just export what you use in template using export keyword and you are done.

With TypeScript

But what convinced me to use this and made me love this even more is the integration with Typescript, look at next example and how you define your props:

<template>
  <button>{{ computedMsg }}</button>
</template>

<script setup="props" lang="ts">
import { computed } from 'vue'

declare const props: {
  msg: string
}

export const computedMsg = computed(() => props.msg + '!!!')
</script>

Look at those props 🤩

If you want to lean more on what is supported and how to use this please check the official page where you can find easy to read examples for all cases.

Thank you so much for reading!

If there is anything I can do to help, please reach out.  Otherwise, if you want to get notified when I post something new please subscribe or follow me on Twitter @ghalex

Have a nice day!

Please wait...

Thank you for subscribing!

4 Comments

Jardar October 24, 2020 Reply

Looks great!

Alexandru Ghiura October 29, 2020 Reply

Yes, I like it too. Let’s see this in the official build

Mark February 2, 2021 Reply

How would I register a component with that “script setup” syntax?

Leave a Reply