Forget about Vue 2: reasons for moving to VueJS 3

The time has come, and you must start to think …. do I have to forget about Vue 2? should I move to Vue 3? You should!! Vue 3 Vue 3 has been operational for only a few months and it is time to meet and practice with the basic concepts, that I already told you (the road to Vue 3) . Here you have two good reasons to start:

because it is the future
because I am leaving here a Vue 3 template to start working with

Move to Vue3 from Vue2 is not direct

Switching from Vue 2 to Vue 3 is not straightforward, i.e. I change the Javascript link to the new version of vue and my code still works …. error!. You will get a multitude of errors because the concept has changed, and as such, you will have to change your entire application. In addition, in my case, I have the handicap that I still can not use NodeJS or TypeScript to make SPA, so that certain aids such as Vue-CLI are not available, or the fact of being able to write .vue files (in my case they will be .js).

Some related VueJS frameworks are still not supported by Vue 3, so you can you can move forward without haste. That’s the case of Vuetify.

Vue 3 first example

For the first example with Vue 3, the first thing to understand is that it is necessary to use the ES6 Javascript modules, which have been available natively in different browsers for some time now. To do this, it is necessary to include type=”module” in scripts.

The starting HTML code is like this:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>Vue3 with @manejandodatos</title>
</head>

<body>
    <div id="app">    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script type="module" src="scripts/index.js"></script>
</body>
</html>

To start with, the HTML code is very simple: there is only one DIV named as #app where all the action will be taken. Reference is made to loading Vue 3, as specified in the official documentation.

The second loading file is related to the module index.js included in the scripts dir, the dir where all the Javascript code is included.

The code of scripts/index.js

Also, the code is also very simple:

    import app from '../components/app.js'
    const {createApp} = Vue;
    createApp(app).mount('#app');

The component app, created on components/app.js is imported. Later, by using Vue 3, it is extracted the createApp function, and it is mounted on the div #app element, already creaded in the HTML file.

The code of components/app.js

The component’s code looks like this:

export default {
    name: 'Test',
    setup() {
        const title = "Vue 3 with @manejandodatos";
        return { title };
    },
    template: `
      <div>
        <h1>{{title}}</h1>
      </div>
    `,
};

Because it is a module, it is necessary to export it, because it is the way you have to do it using Composition API. You need to define the setup for initialization. In addition, we have a template with the HTML code.

And the result of the first example of Vue 3

If you try to execute the html file without a server, you will have a CORS error:

So, the best option if to use the Live Server plugin of Visual Studio Code:

Now, you can execute from Firefox without any problem:

And, that’s all. With only this 3 files you have a Vue 3 tempalte to start, and available on my GitHub.

data() is now a function

In case you need to include data, you must remember that in Vue 3 data is a function, and as such, it must return a value. It is exactly the same as the data property of the components, because if it is not the case, you will have a code with errors.

Vue DevTools

The second most important point is Dev Tools, that are not the same as the Vue 2 Dev Tools , so, you need to install a new extension.

At this moment, I couldn’t get working any extension for Vue 3 using Firefox, still in beta.

Happy coding!