Get 20% off an annual subscription today

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 beta 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, how to create a Vue 3 app from scratch using the CLI, and how to start playing with the Vue 3 source code.

How to use Vue 3’s Composition API in Vue 2

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 create a Vue 3 app

If you’re not working inside an existing Vue 2 project, you’ll want to follow these steps:

1. Ensure you have the latest Vue CLI installed

$ npm install -g @vue/cli

or

$ yarn global add @vue/cli

2. Create a normal Vue 2 project

$ vue create project_name

3. Ensure the project works

$ cd project_name

And then run the development server with:

$ npm run serve

or

$ yarn serve

Then go to the appropriate local server in a browser, perhaps http://localhost:8080

4. Add the Vue 3 CLI Plugin

Stop your development server, if you tested it, and convert your project to a Vue 3 app by running:

$ vue add vue-next

5. Edit the package.json to use the latest Vue beta version

When I installed this initially (and looked in the package.json) it installed Vue beta 1. Upon checking the Vue next repo, I saw that we’re currently on Vue beta 10. So I then updated the package.json like you see below:

  ...
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^3.0.0-beta.10" 
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/compiler-sfc": "^3.0.0-beta.10", 
    ...

Then, of course, I had to run another install to get this version installed.

$ npm install 

or

$ yarn

6. Startup your Vue 3 app and give it a whirl!

$ npm run serve

or

$ yarn serve

You now have a fresh Vue 3 application and you can start playing with the Vue 3 Composition API:

How to learn the Composition API

First and foremost, there’s my Vue 3 Essentials course which teaches all the basics. Then 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. Do note the difference in the import line depending on if you’re inside a Vue 3 app or Vue 2 app with the Composition API plugin.

<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"; // <-- Use this line if you're in a Vue 2 app with the composition API plugin
import { ref } from "vue"; // <-- Use this line if you're in a Vue 3 app

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";

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.

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!

How to use Vue 3 without the CLI

Just like with Vue 2, you can still load up Vue 3 in a plain HTML file to play with it in your browser. Here’s a simple example working from an index.html file that you can create yourself on your desktop.

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

<script src="http://unpkg.com/vue@next"></script>

<script>
  const { createApp } = Vue;

  const App = {
    data() {
      return {
        name: "Gregg",
      };
    },
    template: `<h1>Hello {{ name }}</h1>`,
  };

  createApp(App).mount("#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="http://unpkg.com/vue@next"></script>

<script>
  const { createApp, ref } = Vue;

  const App = {
    setup() {
      const name = ref("Gregg");
      return { name };
    },
    template: `<h1>Hello {{ name }}</h1>`,
  };

  createApp(App).mount("#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.

Download the cheatsheets

Our Vue essentials, Vue 3, and Nuxt.Js cheat sheets save you time and energy by giving you essential syntax at your fingertips.