Vue 3: Start Using it Today

There’s nothing stopping you from coding up Vue 3 applications starting today. While I’m not recommending you bundle the newly released pre-alpha code and release it into production, you can still get ahead of the curve and be one of the first developers on your team to start harnessing the power of Vue 3. In this article, we’ll look at how easy it is to start using the Composition API in your Vue 2 code, and how to start playing with the Vue 3 source code.

Using Vue 3’s Composition API Right Now

Vue 3’s biggest feature (so far) is the Composition API, which provides an alternate syntax for writing larger components, reusing code across components, and using TypeScript. This is not the new way we code components in Vue 3. This is an alternative syntax that you might choose to use based on the three reasons I formerly mentioned.

Luckily for you, this feature can be used in your Vue 2 application today by using the Vue Composition API plugin. If you’re unsure why you’d want to use the Composition API, definitely check out my Why the Composition API video. I’m going to assume that you already know the why, and you’re ready to start playing with the new syntax.

How to Get Started

If you’re not working inside an existing Vue 2 project, you’ll want to create one (See our Vue CLI lesson if you want help creating a Vue app from scratch). Then you’ll want to install the Composition API plugin using:

NPM

npm install @vue/composition-api --save

yarn

yarn add @vue/composition-api

Then inside of your /src/main.js you’ll want to add the following lines of code:

import Vue from "vue"; // <--- You probably already have this line at the top 

import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);

You’ll then be able to use the Vue 3 Composition API from inside your Vue 2 components.

Learning the Composition API

First and foremost, there’s the Composition documentation as well as the API that Evan You posted online. I’d also recommend downloading our Vue 3 Cheat Sheet, which has all the syntax you’ll need to start memorizing the new API.

If you’re working with a new application and want to see the API in action quickly, feel free to copy and paste the following code into your App.vue.

<template>
  <div>
    <h1>My Event</h1>
    <p>Capacity: {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>

<script>
import { ref } from "@vue/composition-api";
export default {
  setup() {
    const capacity = ref(3);

    function increaseCapacity() { 
      capacity.value++;
    }
    return { capacity, increaseCapacity };
  }
};
</script>

If you then fire up your server you should see the following:

Breaking it down

If you haven’t seen this syntax before, let me give you a quick rundown.

import { ref } from "@vue/composition-api";

In Vue 3 we’ll need to get used to doing more imports. This allows bundlers to do something called tree shaking, which means if you don’t use the feature, it won’t be included in your production bundle.

setup () {

The setup method is where all the action happens. This method gets called after beforeCreate and right before the created lifecycle hooks. Notice that setup is the only function inside our component. Our code no longer gets organized by options (i.e. data, methods, computed, lifecycle hooks).

const capacity = ref(3);

ref refers to a Reactive Reference. Here we’re taking an integer and wrapping it in an object, which makes it reactive.

function increaseCapacity() { 
  capacity.value++;
}

This is simply a component method that we will call from our template. It increments capacity.value, because capacity is a reactive reference, and the value of the reference is held in the value property. This is necessary to make a primitive (integer) reactive.

return { capacity, increaseCapacity };

When using the Composition API, we must return the variables and functions that our template needs access to. Yes, this is more verbose, but it also means we can control what gets exposed and we can easily trace where a property is defined. This makes our component more maintainable.

The rest of the code (basically the template) is nothing new. If you want to watch some video lessons that teach this syntax, you’ll find that in our Vue 3 Essentials course.

Organizing your Composition Functions

Since your composition functions contain code you want to reuse across components, you’ll likely encapsulate them into their own files and place them in a directory. I’ve seen developers create folders called use, composable, and hooks to contain these composition functions. To see some examples of what these look like in the wild, Core Vue Team Member Thorsten Lünborg created some code samples you can read.

This Code in Vue 3

If I wanted to use this code in Vue 3 there would be one change I’d need to make. Notice on this import line I’m importing from the plugin:

import { ref } from "@vue/composition-api";

If I were using this code in Vue 3 with modules, I would instead import it directly from Vue.

import { ref } from "vue";

So are people really using this in production?

Recently in Vue London, I polled the audience to see if anyone was using the composition API in production with the Vue 2 plugin. The only three that raised their hands were on the core team. 🤷‍♂️

So would I dive into using this in a new application for a client? Probably not. However, would I use this on a side project to get familiar with the syntax? Absolutely!

Using the Vue 3 Source

The Vue 3 source code is in pre-alpha as I’m writing this post, but nothing is stopping you from playing with it today. However, I should mention that Vue-Loader hasn’t been updated for Vue 3 yet, so you’ll be unable to use it with Vue CLI with .vue files. However, you can still load and play with it in your browser. You’d want to follow these steps:

  1. Clone the source on github.
  2. Install the dependencies by running yarn
  3. Build the project using yarn build vue -f global
  4. Use packages/vue/dist/vue.global.js to play with Vue 3.

To get a simple example working, I created an index.html file next to the generated vue.global.js above, which contained the following:

<div id="app"></div>
    
<script src="vue.global.js"></script>
<script>
const MyComponent = {
  data: {
    name: 'Gregg'
  },
template: `<h1>{{ name }}</h1>`
}
    
Vue.createApp().mount(MyComponent, '#app')
</script>

Sure enough, when I open my browser I get my name printed out. After getting this to work, I realized that I should be able to use the new Composition API. Same example:

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

<script src="vue.global.js"></script>
<script>
  const MyComponent = {
    setup() {
      const name = Vue.ref('Gregg')
      return { name }
    },
    template: `<h1>{{ name }}</h1>`
  }

  Vue.createApp().mount(MyComponent, '#app')
</script>   

Notice the setup method is being used, and it worked!

A Few Take-Aways

  • If you’re just starting Vue, I would go ahead and learn Vue 2, no need to wait for Vue 3.
  • If you like the composition API syntax, you might want to start using it today using the Vue 2 Plugin.
  • If you want to help contribute to Vue 3, now is a great time to get it set up and start playing with it. Don’t be afraid of diving into the source.

If you like this blog post, you may want to watch: