Are you interested in what’s new about Vue? Here is a summary of all the most important Vue new features.

We have all been waiting for this moment for a long time and it finally happened – the new major release of Vue is here! The Vue 3 brings a lot of Vue new features and makes good on the promises of the past 2 years. In this article, I’m going over the new Vue features, discussing the future of the framework and making recommendations on how to start learning Vue in 2020.

Vue.js is now one of the most popular frameworks for building user interfaces of modern web applications. It was created in 2014 by ex-Google developer Evan You. It has now around 157k stars on Github and a lot of community members. A few days ago, Vue 3.0 was released. It’s called “One Piece” – a reference to the japanese manga by the same title.

In this article, I will go through the release notes and show you the most important Vue new features and the most remarkable changes in Vue 3. As a developer who works with Vue on a daily basis, I will also give my own opinion about these changes. I will also tell you a thing or two about the future of the Vue framework and its place in the world of frontend development.

Vue new version – long overdue Vue 3

We had to wait about 2 years for the stable release of Vue 3. The first information about Vue 3 appeared on September 21st, 2018 at the Vue.js conference in London. The first alpha version was released at the beginning of 2020. Vue Core Team decided to move all the work regarding Vue 3 to a separate repository called vue-next and rewrite the Vue core from scratch using TypeScript. This allowed the creators to rethink and improve some of the core mechanisms in the Vue framework.

During these 2 years of hard work, around 100 contributors did a really great job by preparing over 30 RFC, over 600 pull requests and over 2600 commits to the Vue 3 repository. Impressive!

Vue.js London is a major global conference for frontend developers

Vue 3 migration issues

Here is a list of the most important breaking changes in Vue 3:

• To create a Vue app, we need to use a special createApp function instead of creating a Vue object instance,

Creating app in Vue 2:

new Vue({
  el: "#app",
  template: "<div>{{message}}</div>",
  data: { message: "Hello World!" },
});

Creating app in Vue 3:

const app = Vue.createApp({
  template: "<div>{{message}}</div>",
  data() {
    return { message: "Hello World!" };
  },
});

app.mount("#app");

• As you can see in the example above, the data option in Vue 3 should always be a method.
• Global components in Vue 3 should be now attached to the application object instead of attaching them to the Vue instance.

Mounting global component in Vue 2:

Vue.component('my-button', {
  template: '<button @click="updateValue">Click to update!</button>',
  methods: {
    updateValue() {
    this.$emit('update');
    },
  },
});

Mounting global component in Vue 3:

const app = Vue.createApp(/* app config */);

app.component('my-button', {
  emits: ["update"],
  template: '<button @click="updateValue">Click to update!</button>',
  methods: {
    updateValue() {
      this.$emit('update');
    },
  },
})

app.mount("#app");

#vue #javascript #web-development #programming #developer