NEW COURSE 👨🏼‍🏫 Up and Running with Vue.js is available! 🎉 Get it now!

Start using Vue 3 in a new project right now

January 17, 2020 • ☕️ 1 min read

So you've heard of Vue 3 and you want to start playing around with it but not sure where to start. Did you know that you can add Vue 3 to a new project using the Vue CLI? In this tutorial, I will show you how to create a new project using the Vue CLI and then using a new plugin, add Vue 3 Alpha to your project.

With Vue 3 installed we will walk through creating a new component using the Composition API. We will start by creating a simple Counter component and it might be a trivial example it does allow you to see the building blocks of Vue's new Composition API.

Sample Code

# create a Vue 2 project using the Vue CLI
vue create hello-vue3-sfc
# in an existing Vue CLI project
vue add vue-next

App.vue

<template>
  <div id="app">
    <counter></counter>
  </div>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
  name: "app",
  components: {
    Counter
  }
};
</script>

Counter.vue

<template>
  <button @click="increment">
    Count: {{ state.count }} Double {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });
    function increment() {
      state.count++;
    }
    return { state, increment };
  }
};
</script>

Resources

Follow me on Twitter, LinkedIn, or sign up for my newsletter.

Dan Vega

I’m a Husband, Father, Curriculum Developer and maker of things from Cleveland Ohio. I created this website as a place to document my journey as I learn new things and share them with you. I have a real passion for teaching and I hope that one of blog posts, videos or courses helps you solve a problem or learn something new.