Vue 3 just got me from interested to excited

Vue 3 has been on my radar for a while, but a recent RFC got me from "interested" to "excited".

I am specifically talking about declaring components.

This is how you typically do it in Vue 2:

<template>
  <div>{{ hello }}</div>
</template>

<script>
export default {
  data() {
    return {
      hello: 'world'
    }
  }
}
</script>

Vue 3 (not released yet) introduces the composition API. This allows you to put the logic together rather than being spread across options.

My first reaction to this was: cool, this will be useful for complex components, but I will probably stick with the old one for cases that don't require it.

After all, this is how the above component would look like:

<template>
  <div>{{ hello }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const hello = ref('world')

    return {
      hello
    }
  }
}
</script>

Now much changed for this simple component, right? In fact, it got bigger.

Now the other day, a new RFC was posted on GitHub. Using "setup", you usually don't need methods, computed, data, and life cycle hooks anymore, so setting up "script" comes with seemingly unnecessary overhead.

So this new proposal allows us to only work using the setup method directly inside <script>.

<template>
  <div>{{ hello }}</div>
</template>

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

export const hello = ref('world')
</script>

This might look a little alien, but think about it. In Vue 2, we exported an entire object using "export default" for the template to use. With <script setup> we export individual parts for the template to use.

With all the indentation necessary to add a little bit of state, setting up components in Vue was always a little tedious. This svelte-react-mix completely gets rid of this problem.

Now how do we register components you might ask? This also got a DX boost. Instead of importing AND registering it, the two steps were merged into one. There still seems to be some debate on all of this, but check out the RFC for more info.

RFC: https://github.com/vuejs/rfcs/pull/182