Build Your First Vue3 Application – Our Vue3 Course!

I’m super excited to announce that at LearnVue we’ve heard your feedback and have finally created an online Vue3 course for you!

It’s a Vue 3.0 App Build Along where you can either watch me write the program or just download the code and write the code with me! 

This is an intermediate level course and is best for developers who have some experience in Vue, but want to know more about the changes coming to Vue3. 

Let’s take a look at what this all means. 

What We’ll Be Building

A personal habit I have is to block out my schedule so I can see exactly what I have to do and when. So we’re going to be building a time blocking application!

There are going to be several really cool features like drag and drop support, creating/editing/deleting events, and handling multiple calendars.

To implement these features and others, the app is currently using the Vue3 alpha release, which has many of the biggest changes coming to Vue. I tried to cover the most important changes. 

If you want to see more, here is a link to a video where you can check out more

Learn All About the Composition API

The most talked about change is the Composition API, which is designed to help better organize code in larger Vue projects. 

At first, it feels like a huge difference from the previous Options API, but once you get some practice, I’m sure it will make a lot of sense. From a high level, the concepts work the same, but the code syntax is different.

So, we’re first going to be working on writing Vue3 code and highlight the differences. Some of the biggest changes are:

  • The setup() method and organizing code
  • Declaring reactive properties
  • A different this reference – changes how we access props, emit events, etc.

Other Topics in the Vue3 Course

While the Composition API is the biggest change to our code, we’re also going to look at some old and new Vue topics. This includes some of the following. 

Using the Composition API to create a Global State

If you’ve worked in Vue before, you’ve definitely heard of the Vuex library – which is an easy way to share data between all your components. 

With the Composition API exposing some of Vue’s core reactivity libraries, we can implement our own simple store. 

It’s a great way to get an understanding of some of the potential uses of the Composition API and see some of its inner workings.  

Transitions in Vue

To help create a really smooth user experience, we’re going to be adding transitions to our modals to help them fade in and out. We’ll also be adding a shake animation when we create conflicting events. 

Both of these features will use Vue’s <transition> element and corresponding CSS classes. This is just a quick introduction, but it should give you a great foundation in working with Vue animations.

Emitting Custom Events

This is a very important Vue topic because it allows us to communicate between components. The way we do this changes a little in Vue3 with the introduction of the setup method and context object. 

We’ll cover and use a lot of custom events, so you’ll definitely get a lot of practice with this topic. 

Passing Event Listeners Through a Component

Passing events through a component is a great way to develop wrapper components – which help organize our code. 

Once again, since this no longer means the same thing in Vue – the way that we access a component’s attributes are different. We’ll learn this new way. 

Implementing the Drag and Drop API

While this isn’t Vue specific, the Drag and Drop API is one of my favorite features to add to applications because it really makes an app feel super professional. 

However, it’s a little tricky to get up and running so we’re going to add it to our events so we can easily drag them around. 

Why Sign Up?

Alright, here’s my final little pitch for you, haha. 

I really think that this Vue3 course is a great introduction to the biggest changes coming in the near future. 

But I think the most valuable thing is that this course is going to keep getting updated with new features and new tools as Vue updates and as more people finish. 

I want to listen to your feedback and teach what you find interesting, so any future topics we cover will be inspired by what you want! In fact, I’ve already started working on the next section based off some of the early feedback. 

I want to listen to your feedback and teach what you find interesting, so any future topics we cover will be inspired by what you want!

So I hope you join me in our Vue3 course and app build along. But regardless, thank you for making LearnVue such a great community of developers. 

See you soon!