First lines of code using Vue 3

In the previous post we left the basic template to work with Vue 3, of which I have already spoken on several occasions (the road to Vue 3) and I have told you the basic concepts. Now, it’s time to learn how to use the new features that we will be unraveling little by little. We take the first steps with Vue 3, and a simple example with Composition API.

Double Bindings with ref

When I started with Vue 2, my first step was to check how well data-binding works, and that is exactly what we are going to implement with Composition API, and for which, we need to use ref. For that, we are only going to have to modify app.js of our template. The code looks like this:

const {ref} = Vue;
const app = {
    name: 'App',

    setup() {
        const title = ref("Vue 3 with @manejandodatos - Version 0.2");
        
        return { title };
    },
    template: `
      <div>
        <h1>{{title}}</h1>
        <input v-model="title">
      </div>
    `,
};

export default app;

The interesting part of the modification is in the first line, where we extract ref from the vue object. And the second detail is that the title constant uses this function ref.

As you may guess, everything return by setup is what you can use in the template. Just with this knowledge, you can use two way data-binding:

As you can see, it is not complicated, but it requires that first knowledge to continue advancing.

What I have learnt with this first lines of code using Vue 3

By now, in these first steps with Vue 3 you will have already noticed that, in addition to what you already know from Vue 2, there are new options for programming in Vue 3.

At the moment, this is what I have been learning about Vue 3, which has differences with respect to what I knew, and for that reason I am working step by step, little by little. I have not yet tried VueX (yes in Vue 2) or VueRouter, because I need to consolidate concepts to get the best performance from Vue 3. In the next post we will make a first example, where we will do the same in the form of Vue 2 and with Composition API.

Happy coding.