Vue New Features and Breaking Changes – Overview of Vue 3

Vue New Features and Breaking Changes – Overview of Vue 3

Vue New Features and Breaking Changes – Overview of Vue 3. 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.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Learn VUE 3 by Making a Web App ~ Composition API, Vue JS Hooks?

Learn how the new Vue JS 3 works by making a simple and easy web application to increment and decrement a numerical value using the Composition API, including Vue Ref, Vue Reactive and Vue Computed.