fbpx

A First Look at Vue3 Alpha Release – Example App in 15 Minutes

Vue3 Alpha is out now! 

It has tons of highly anticipated features like proxy based reactivity, new component types, and the most talked about, Composition API.

Even though the alpha version is meant for preview reasons only, we can still start using it right now. 

The creator of Vue, Evan You, put together a sample webpack project that we can use to check out some of the newest features in Vue3. 

Okay – enough. Let’s cut to the chase and start using Vue3 in our very first app.

Getting Started

First, we’ll have to actually clone the You’s example repository. So in our command line.

git clone https://github.com/vuejs/vue-next-webpack-preview.git

Then, because we just downloaded the files and didn’t use vue-cli to set up our project, we’ll have to go in and install our dependencies. 

cd vue-…

cd vue-next-webpack-preview
npm install

Nice – let’s check out what we have first and then start diving into the details of the code. To run it, we just need to run npm run dev from our command line. 

With the default code from the repository, it should look just like this. 

Now, let’s see what makes Vue3 alpha different from Vue2. 

What’s New in Vue3 Alpha

Even though this is a very simple example of Vue3, it’s already extremely easy to spot major differences between the code. Just at a quick glance through the components, I noticed…

  • A completely different main.js file
  • Typescript support
  • This new setup() method

Let’s briefly check out a few specifics of this sample code. If you want a more detailed look at Evan You’s example repo, here is a great article

package.json

The most glaring differences in our package.json file are the updated versions for Vue that switch to Vue3.

However, one thing that I found interesting were the commands for npm run dev. I’ve grown so accustomed to seeing the vue-cli-service serve that these really popped out. But they work very similarly. In fact, vue-cli-service serve is actually based off this webpack command. 

Expect to see more advanced vue-cli support for Vue3 in the coming months. 

main.js

Next, this file looks very different. 

Vue3 replaces the new Vue({...}) syntax with a createApp() and mount methods. Now, we have to import these methods.

Not only does this align with Vue3’s goal of being modular, but I think this new syntax makes the code more readable and understandable at a glance. 

App.vue

Finally, the example component that You provided shows several new features of Vue3. The ones we’ll be discussing are Vue fragments and the Composition API.

<template>
  <img src="./logo.png">
  <h1>Hello Vue 3!</h1>
  <button @click="inc">Clicked {{ count }} times.</button>
</template>

Looking at the template code, we notice that there are three root level elements. Previously, Vue2 would break and say that a component could only have a single root element. But now, Vue3 support fragments.

In short, fragments allow a component to return more than one root element. This was a change that I was really looking forward to because it means you can design components to fit some edge cases. 

However, one thing that was unsure was how they would be implemented. I think the way it’s implemented is really cool. 

Unlike React, where you need to wrap multiple root elements in a React.Fragment component, Vue3 does not require any special syntax. 

You want more than one root element? Just make more than one root element!

We’ll make our own fragment example in a little bit. But for now, let’s go into the Composition API.

Composition API

The Composition API replaces the Options API as Vue’s primary way to define components. The reason behind changing is primarily due to 

  • Organization – code for a specific feature can be grouped together
  • Reusability – Composition API functions are more reusable than mixins

But you may be wondering, “What even is this Composition API?” 

If you have previous experience with Vue, you’re probably used to seeing something like this.

export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc: () => {
      this.count++;
    }
  }
}

In the App.vue example, you’ll see that it’s completely different. Instead of data, methods, and computed values, there is simply just this setup method.

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const inc = () => {
      count.value++
    }
    return {
      count,
      inc
    }
  }
}

This setup method is called before the created() lifecycle hook and it’s where we should define our component methods and variables. 

Then, to make certain methods and data available to the template and other methods, we have the setup method return them.

In the example project, the ref method we imported makes count reactive. Then, we define the inc method to increment count. Previously, this would be included in the methods object property. Finally, we return both count and inc so they can be accessed by our template.  

If you want to learn more about things like adding computed properties, check out my more detailed tutorial on the Composition API.

Creating a Fragment

Okay – let’s start writing some more code to check out some of Vue3’s capabilities.

We talked a little bit earlier about fragments. To remember, fragments are a great way to avoid having unnecessary wrapper elements in your DOM.

Not only do these elements clutter up your DOM, but they can really mess your styles. 

Let’s say we have a table and we want to use a child component to render some <td> elements. So let’s modify our App.vue code to include this. 

<template>
    <img src="./logo.png">
    <h1>Hello Vue 3!</h1>
    <button @click="inc">Clicked {{ count }} times.</button>
    <table>
      <tr>
        <fragment-component />
      </tr>
    </table>
</template>


<script>

import { ref } from 'vue'
import FragmentComponent from './test/FragmentComponent.vue'
export default {
  components: {
    FragmentComponent
  },
...

Then, create another file called FragmentComponent.vue and insert the following code. As you can see, it has two root elements.

<template>
  <td>Hello</td>
  <td>World</td>
</template>

Now, if you reload our webpage, you’ll see that everything loads in correctly and if you check out the DOM, both td elements are direct children of the tr element.

Both of the elements render without a root element

Suspense

Another new feature Vue3 is a special Suspense component. 

Suspense components allow for fallback content to be displayed while an asynchronous component is initializing. Some great use cases include…

  • Creating loading screens
  • Displaying default data while making API calls
  • Hiding elements until all of its data is loaded

To show how these work, let’s make a new file called AsyncComponent.vue

Inside this, put the following code. 

<template>
  <div>
    This is our asynchronous component!!
  </div>
</template>

<script lang="ts">

async function wait(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}
export default {
  async setup () {
    await wait(5000)
    return
  }
}
</script>

Here, our setup method is an async method and we just run a dummy method that returns after 5 seconds. Now, we have an asynchronous component

Then, inside App.vue, we can render fallback content while waiting for AsyncComponent to resolve. All we have to do is add our special Suspense component and some templates with the tags #default and #fallback

<Suspense>
      <template #default>
        <async-component />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
</Suspense>

Now, if we reload our page, we’ll see that the fallback, “Loading…”, appears for 5 seconds until our async component is resolved. Then, it’s replaced by AsyncComponent replaces it. 

Before and after our Async Component resolves

Conclusion

Even in this alpha stage, Vue3 already has many of the major updates that people were anticipating.

While a lot of the changes take place underneath the hood of VueJS (render efficiency, Typescript rewrites, etc.) – there are also a significant number of changes that will affect the way we code. I’m already thinking of new ways to design projects! 

I hope this tutorial was a good working introduction to Vue3, I plan on releasing a complete course where we build an app in Vue3 start to finish so stay tuned for that. 

But for now, happy coding!

Share Your Thoughts