fbpx

Setting Up Your First Vue3 Project – Vue 3.0 Release

Vue3 is officially here! In this announcement by Evan You, he announces the biggest changes in the new framework and talks about the amazing work the whole Vue team has done.

Developers have long been awaiting the really cool features announced for Vue3 like Typescript support, better organization for large projects, and rendering optimizations that make for better Vue apps. 

If you’re anything like me, you just want to jump right in and start programming. So let’s do just that!

In this tutorial, we’ll be covering how to:

  • Setup your first Vue3 project
  • Build a Vue3 component
  • Use some of the new features

Alright, I’m sure you’re just as excited as I am so let’s start coding.

Creating Your First Vue3 Project

There are a few different options for adding Vue3 to your existing projects or creating your very own Vue3 project

In this tutorial, we’ll be covering my two personal favorite options:

  1. Vue CLI
  2. Vite 

Vue CLI

Vue CLI is a command line interface for Vue development that serves as the baseline of the Vue ecosystem. For our case, it allows us to create a Vue app. 

First, we have to make sure that we have the most up-to-date version of the Vue CLI and we can do that by running in our terminal.

npm i -g @vue/cli

Next, to create our project, we want to run:

vue create <project-name>

If we successfully updated our CLI, we should have an option to choose Vue3.

Once we choose the Vue3 option, our app should build. When it’s done, we just have to go inside our project and then run our Vue app! The commands for that are:

cd <project-name>
npm run serve

Now, if we navigate to our http://localhost:8080/ in our browser, we should see our app!

Perfect!

Vite

This is my personal favorite way to create a Vue3 project – it’s so quick and simple!

Although it’s still in beta, Vite is a “opinionated web dev build tool that serves your code via native ES Module imports during dev”. Made by Evan You himself, it’s a great way to work on your Vue3 apps and I’ve even switched my projects so Vite. 

To get started in Vite, all we have to do is run 

npm init vite-app <project-name>

Then, we just have to go into our project folder, install our dependencies, and then run our app with the following commands

cd <project-name>
npm install
npm run dev

Now, if we navigate to http://localhost:3000 – we should see this following app. 

And this is what we’re going to be using for the rest of this tutorial!

Understanding the Vue3 Component 

Now that we have our Vue3 app set up, let’s go over how the components work. 

The biggest change in Vue3 is the introduction of the Composition API. In this new structure, we are able to organize our code by feature rather than only being able to separate it by data, computed, etc. 

This allows us to create more modular, readable, and scalable code because the code for a single feature can all be written in one area of our code. 

Source

If we open up the src/components/HelloWorld.vue file, we can see code that looks identical to the code we wrote in Vue2 – this is called the Options API. 

This is great because it shows how we can still use the old syntax if that’s what you are more comfortable with. For this tutorial, let’s cover how we make this in the new Composition API and identify the differences between Vue2 and Vue3.

Inside the script area, let’s first import ref from the vue core library to allow us to create reactive variables. In the Composition API, we have more control over our reactive data.

import { ref } from 'vue'

Then, let’s replace our data option, with a setup function that will look something like this. 

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup ( ) {

    return {

    }
  }
}

If you’ve never seen the Composition API before this will look very different, but don’t worry – it’s not too complicated. 

This setup method runs when our component is created and is where we can define all of our reactive data, computed properties, methods, etc. that we want our component to use. Then, anything that this setup method returns is accessible in our template!

Let’s make a reactive count variable using ref and then return it from our setup method. 

  setup ( ) {
    const count = ref(0)

    return {
      count,
    }
  }

Then, if we go back to our app, you’ll see that it works exactly the same as the Options API equivalent!

Next, let’s see how we can create a method in the Composition API. 

Inside setup, let’s make an increment method and make sure to return it from setup so that our template can access it~

setup ( ) {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
}

Now, in our template, let’s just call increment whenever the button is clicked. 

<button @click="increment">count is: {{ count }} </button>

If we refresh the page, we’ll see that our component is properly using our new method. 

And now we have our first Vue3 project using the Composition API!

Other Fantastic Vue3 Resources

This is only the very tip of the iceberg when it comes to learning Vue3, there are more advanced things like setting up Vuex or Vue-Router in Vue3

Regardless, setting up the project and just starting to play around is a major step in the journey to mastering Vue3. 

Here’s a list of our other articles that should be helpful in getting up and running in Vue3. 

And there you have it!

I hope you’re just as excited as I am about the official release of Vue3. There are so many cool features that should be so useful for creating scalable Vue apps. 

Be on the lookout for more tutorials in the near future!

And as always, leave a reply if you have any comments or questions. Happy coding!