• Culture
      Back
      Agile Mindset

      Agile is not a principal or a method, but it’s an integral part of being Agile that is guided by principles, defined by values and manifested through various practices.

      Bacancy Values

      You add value to your customer when you deliver a product or service that has been designed specifically to solve their problem.

      Bacancy Culture

      Core Team will work as Scrum Team where Team will have quarterly goal to make sure that we run financial, administrative and project management prospective.

  • What we do
      Back
      Product Engineering

      Seize the opportunity to make your product stand out. We enable our clients

      AI & ML

      We automate businesses and optimize processes by deploying smart AI and...

      Blockchain

      Get a full spectrum of blockchain development services from us to bring scalability...

      IOT

      Improve Business Productivity and Efficiency using our high-end IOT professional services...

      Digital Transformation

      We truly become a part of your business by helping you think through the...

  • Who we work with
      Back
      Real Estate

      We can help you uncover the hidden revenue opportunities to showcase your...

      Finance & Insurance

      In the emerging technological environment, we are offering reliable banking and financial...

      Oil & Gas

      Reshape your energy landscape and gain better control by harnessing the best...

      Healthcare

      Utilizing advanced technologies to provide best software, web & mobile development services...

      Travel & Transport

      Manage your logistics and transportation business at the ease of your fingertips...

      Startups

      We can help you to build your MVP with advanced technologies....

  • About Us
      Back
      About

      Agile, A Process Delivering Values & Successful Products

      Blog

      Abstract Technology News Driven by Sources

      Career

      If you are passionate about your career, have creative flair and good craft skills, we want you!

  • Technology
      Back

      Front-End

      AngularJS ReactJS Vue.JS JavaScript Backbone.JS Ember.JS MEAN MERN

      Back-End

      Ruby on Rails Node.JS Golang Laravel PHP Python .NET Yii

      Mobile

      Android iOS React Native Flutter Ionic Kotlin

      CMS & CRM

      Spree Magento Wordpress Drupal Umbraco Woocommerce Salesforce Microsoft Dynamics 365<
      Explore All
  • Talk to Us
Talk to Us
Close
    MENU
  • Culture
    • Agile Mindset
    • Bacancy Values
    • Bacancy Culture
  • What we do
    • Product Engineering
    • AI & ML
    • Blockchain
    • IOT
    • Digital Transformation
  • Who we work with
    • Real Estate
    • Finance & Insurance
    • Oil & Gas
    • Healthcare
    • Travel & Transport
    • Startups
  • About Us
    • About
    • Blog
    • Career
  • Technology
      Front-End
    • AngularJS
    • ReactJS
    • Vue.JS
    • JavaScript
    • Backbone.JS
    • Ember.JS
    • MEAN
    • MERN
    • Back-End
    • Ruby on Rails
    • Node.JS
    • Golang
    • Laravel
    • PHP
    • Python
    • .NET
    • Yii
    • Mobile
    • Android
    • iOS
    • React Native
    • Flutter
    • Ionic
    • Kotlin
    • CMS & CRM
    • Spree
    • Magento
    • Wordpress
    • Drupal
    • Umbraco
    • Woocommerce
    • Salesforce
    • Microsoft Dynamics 365
    • Explore All
  • Contact Us
  • CLOSE
New Features in Vue 3

What’s New in Vue 3? – A Comprehensive Overview on Exciting New Features in Vue 3

Kiran Bhatt Kiran Bhatt
October 13, 2020 9 min read

Last Updated on October 13, 2020

Quick Summary:

Vue 3 is already available! The wait is over now. If you’re likely to get a head start with the updated version, read the blog to know everything about what’s new in Vue 3. There is a seminar conducted by the Massachusetts Institute of Technology, where they invited Sarah Dranser and Anthony Gore to make the event more exciting and educational. The event is all about; What’s new in Vue 3? The experts discuss about the new Vue 3 components and features that will help us to improve your Vue application’s performance.

Table of Index

1. Introduction

2. Know About Vue 3 Release Date

3. What’s new in Vue 3?

  • Composition API
  • Multiple Root Elements
  • Suspense
  • Multiple V-models
  • Better Reactivity
  • Portals
  • Fragments
  • Global Mounting/Configuration API Change
  • Custom Directive API
  • Full TypeScript Support

4. Final Thoughts

Introduction

Recently on 18 September 2020, Vue 3 released with many new and exciting features that lead to better performance and maintainable code. If you’re not aware of it, then you should check out this blog post to know the crucial details and resources on what’s new in Vue3?

Massachusetts Institute of Technology (MIT) held a colloquy for their students. The guests of honor were Sarah Dranser and Anthony Gore, who were invited to make the conversation more educational and highly-interactive for the students. The seminar was conducted to educate the students regarding the latest trends about the progressive front-end framework created by Evan You. Yes, it’s about the new Vue 3 component and features for Vue performance optimization.

MIT

Sarah Dranser is an award-winning speaker, conducts conferences worldwide, and shares her insights about Vue, animations, and other great stuff. She is a former Principal Lead of Emerging Markets, Cloud Advocates at Microsoft, and UX & Engineering at Trulia/Zillow Group.

Anthony Gore loves to share insights about the new web technologies; he is a full-stack developer and the founder of Vue.js Developers from Sydney, Australia. He is passionate about JavaScript and an active technical writer.

To make it more interesting, me and Sarah Dranser have decided to discuss the Vue 3 components and features one by one so that you won’t get bored where you all can also join and share your insights about Vue 3. So without further ado, let’s get started! – Anthony Gore

What's new in Vue 3

As per the standard update from Evan You, Vue 3 is more durable, smaller, and more maintainable, and it’s more comfortable to target native. And, there are prominent features in Vue3. Let’s discuss them in detail.

Know About Vue 3 Release Date

The Vue 3 core is officially released as of 18 September 2020, which means the core is stable. The Vue 3 docs are published with a migration guide about the changes done in Vue 3.

Now you’re all set to experiment with Vue 3 and have fun with it!

What’s New in Vue 3? – Vue 3 Components, new features, and changes:

1. Composition API

Composition API is the collection of APIs for a better understanding of business logic. It is different from Options API in Code structure organization that focuses on the features to be developed rather than code lines. The colored blocks are used for logical concerns, and comparing them with the Composition API provides a better organization of logic than the options API.

Start creating with the Composition API with a flexible code organization and logic reuse capabilities with many other improvements. It helps to make your code readable and maintainable by introducing the setup method as shown below in a sample script where we’re doubling a number.

< script > 
import { ref } from "@vue/composition-api" 
export default { 
 setup () { 
 const theNumber = ref(1) 
 function doubleTheNumber () { 
 theNumber.value = parseInt(theNumber.value) * 2  } 
 return { 
 theNumber, 
 doubleTheNumber 
 } 
 } 
} 
< /script > 

2. Multiple Root Elements

In Vue’s previous version, the template tags only took a single root element, even if you had just two < p > tags. Enclose them within a

tag to get it working and modify the CSS code in the parent component.

But in Vue 3, there is no restriction, and you’re not required to have a root element anymore.

You can use any number of tags directly inside the section:

< template > 
 < p >Count: {{ count }} < /p > 
 < button @click=”increment”> Increment < /button >  < button @click=”decrement”> Decrement < /button > < /template > 

Similar code in Vue 2:

< template >
 < div class+”counter” > 
 < p > Count: {{ count }} < /p >  
 < button @click=”increment” > Increment < /button >  < button @click=”decrement” > Decrement < /button >  < /div > 
< /template > 

3. Suspense

The suspense component is a great idea that will be adopted in Vue 3 from the React ecosystem. You can suspend your component rendering by a fallback element until a condition is met.

The suspense will be a component with slots:

< Suspense > 
< template > 
 < Suspense-component/ > 
< /template > 
< template #fallback > 
 Loading… 
< /template > 
< /Suspense > 

The below given below would trigger the fallback until you’ve completed the call to getMyData.

export default { 
 async setup () { 
 const data = await getMyData() 
 return { data } 
 } 
} 

Suspense components can reduce the boilerplate code required to make external calls.

4. Multiple V-models

V-model is a directive to achieve two-way binding on a component. You can use these components to pass a reactive property and edit it from within. V-model is a simple way to pass in value and listen to the input event.

Let’s understand it by taking an example of creating a name component with two values: Forename(s) and Surname.

You’re required to have a v-models for each of those values.

< NameComponent 
 v-model:forenames="forname" 
 v-model:surname="surname" 
/ > 

5. Better Reactivity

Vue had great reactivity in its previous version also, and you might haven’t come across any cases where you found that reactivity was lacking. Let’s go back to Vue 2 and have a loot what those limitations were and then modify it to see if the watchers are triggered:

< template > 
 < div class="hello" @click="test" >test {{list }} {{ myObj }}< /div > 
< /template > 
< script > 
export default { 
 name: "HelloWorld", 
 data() { 
 return { 
 list: [1, 2], 
 myObj: { name: "Preetish" } 
 }; 
 }, 
 watch: { 
 list: { 
 handler: () => { 
 console.log("watcher triggered"); 
 }, 
 deep: true 
 } 
 }, 
 methods: { 
 test() { 
 this.list[2] = 4; 
 this.myObj.last = "HS"; 
 delete this.myObj.name; 
 } 
 }
}; 
< /script > 

In Vue 3, modifications can be done directly without implementing any helper functions.

 
export default { 
 setup() { 
 let list = ref([1, 2]) 
 let a = ref(0) 
 let myObj = ref({ name: 'Preetish' }) 
 function myFun() { 
 list.value[3] = 3 
 myObj.value.last = 'HS' 
 delete myObj.value.name 
 } 
 return { myFun, list, myObj } 
 } 
} 

Look how the watcher is triggered four times in the Vue 3 setup.

Quick Read:
Hire Senior Vue.js Developers And Build Awesome Work Scheduling App As Per Your Business Operations

6. Portals

Portals are a way to render child nodes into a DOM tree, and it is a concept from React to render a component outside the parent Vue app’s DOM. This process is very uneven with extra CSS, and JS must inject it into the DOM tree. Using a portal requires a tag with an Id to have a

before the end of your HTML body given below:

< !DOCTYPE HTML > 
 < html lang="en" > 
 < head > 
 < /head > 
 < body > 
 < div id="app" >< /div >
 < div id="modal" >< /div > 
 < !-- built files will be auto injected -- > 
 < /body > 
< /html > 

When you require to teleport a component inside the modal; use the Portal syntax as shown below:

< template > 
 < Portal target="#modal" > 
 < div >I'm rendered in the modal!< /div > 
 < Portal > 
 < /template > 

7. Fragments

Fragments are also called “Multiple Root Nodes.” Fragments introduce this and will enable you to use multiple nodes in a component. If you’re using attribute inheritance, then you need to specify which root component inherit the attributes passed to the parent component:

< template > 
 < ComponentOne / > 
 < ComponentTwo v-bind="$attrs"/ > 
 < ComponentThree / > 
< /template > 

Here you can see that Vue 3 components allow you to use multiple root nodes without any extra effort.

8. Global Mounting/ Configuration API Change

Virtual DOM is used to faster and better performance by reducing the runtime overhead. It helps you to skip unnecessary condition branches and re-renders. It results in faster the component instance initialization, better speed, and half the memory usage.

Changing the configuration API of your Vue application is changed in Vue 3 to improve the possibilities of what can be done using a single global instance.

The current RFC gives new syntax snippets in the VueJS repository and it looks like:

CURRENT:

import Vue from 'vue' 
import App from './App.vue' 
Vue.config.ignoredElements = [/^app-/] 
Vue.use(/* ... */) 
Vue.mixin(/* ... */) 
Vue.component(/* ... */) 
Vue.directive(/* ... */) 
new Vue({ 
 render: h => h(App) 
}).$mount('#app') 

NOW:

import { createApp } from 'vue' 
import App from './App.vue' 
const app = createApp(App) 
app.config.ignoredElements = [/^app-/] 
app.use(/* ... */) 
app.mixin(/* ... */) 
app.component(/* ... */) 
app.directive(/* ... */) 
app.mount('#app') 

9. Custom Directive API

I assume that you are aware of the directive if you’re using Vue. It is the built-in directive when talking about the v-model. These directive methods are synced in Vue 3 with the standard Vue lifecycle to get beforeMount, updated, beforeUnmount, mounted, and unmounted. It becomes effortless to remember when you’re developing your application, and you’re no longer required to find which method you need and remembering two different life cycles.

Directives are used to determine Vue to perform some special operations and define custom directives as per their use cases. Previously custom directives had hooks that didn’t indicate any component life cycle states.

In Vue 3, custom directives consist of all the components lifecycle hooks, which provides a better understanding for developers and semantic organization.

10. Full TypeScript Support

The Vue core team switched to TypeScript from Flow for the development of Vue 3 components to create applications with better type hints. It becomes more comfortable to use TypeScript in Vue 3 compared to the previous version; it will be more TypeScript-friendly.

Vue 3 has built-in TypeScript support, whereas Vue 2 could accommodate TypeScript into your Vue application.

In the end

I hope you’ll enjoy learning what’s new in Vue 3 with Anthony Gore and me. We’ll surely meet again in the new event, till then, explore Vue 3, learn new technologies, and yes, happy coding. Thank you.

– Sarah Dranser

But before we end the event, and I want some students who can discuss Vue 3 features that Sarah and I didn’t mention.

– Anthony Gore

Change detection, Teleport, and Logic extraction – Student’s answers.

I enjoyed sharing my insights with you and waiting to have more such events with you all with more enthusiasm. Thanks.

– Anthony Gore

Final Thoughts

Now that Vue 3 is officially released, you can start using it right away. The new features can improve your application’s performance and faster systems.

There are a few life improvements to create applications that can help you excel in and enjoy.

Vue 3 is backward compatible with some minor changes that do not replace the existing way of doing things; instead, it adds new ways.

Hopefully, you find this blog valuable and have a clear understanding of the modern Vue components and features. If you are looking for version upgrade support to upgrade from Vue 2 Vue 3 or if you are looking for a helping hand to build responsive cross-platform Vue app with Quasar, we can be your one-stop solution. Get in touch with us today to experience one-of-a-kind Vue.js app development services fluffing your custom Vue.js project requirements. We are a globally renowned VueJS development company and let you hire Vue.js developers to build custom VueJS applications.

Frequently Asked Questions:

  • What is new in Vue JS?

    Vue 3 is officially released, which is equipped with TypeScript support. Here are the new features in Vue 3 that you should implement in your existing Vue application: Composition API, V-model, Portals, Multiple root elements, Suspense, and much more.

  • Is Vue 3 stable?

    Yes, Vue 3 is stable now, as it is officially released on 18 September 2020.

  • What is VUE composition API?

    The composition API is a set of function-based APIs for the flexible composition of component logic.

Kiran Bhatt
Kiran Bhatt View all post
Kiran is a content associate at Bacancy Technology. Kiran Bhatt has an astounding affinity for reading and writing about trending technologies that allow her to be creative. She is a social aficionado. When Kiran is not scrolling down her Instagram feed, she can be found reading novels of Jhumpa Lahiri, Stephenie Meyer, Harper Lee and more.

Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !


Related articles
Vue Storefront
Vue.JS
Introduction to Vue Storefront: Headless PWA to Boost Your eCommerce Site Performance
November 11, 2020 by: Paridhi Wadhwani
21 Amazing VueJs Projects
Vue.JSweb application development
21 Amazing VueJs Projects that are OpenSource and Free
June 10, 2020 by: Paridhi Wadhwani
Vue.js Best Practices 2020
Vue.JSweb application development
Vue.js Best Practices 2020 (To Craft Highly Modular Application)
May 14, 2020 by: Riken Solanki

Top 1% IT Talent

Bacancy Technology is an exclusive hub of top dedicated software developers, UI/UX designers, QA experts, and product managers with an incredibly rare and hidden talents you will ever come across. We let you access the top 1% IT talent from independent software developers to the fully managed teams.

Time Zone Aligned

Timezone is never a constraint when you are working with Bacancy Technology. We follow one very simple principle – our developers and your time zone. Hire dedicated software developers from us and make collaboration in a faraway to work according to your time zone, deadline, and milestone.

Experienced Team

Whether you are looking for skilled developers in emerging technologies or looking for an extended arms to augment your existing team, we can lend a helping hand in both situations. We are a full-stack software development company with 300+ skilled and experienced software developers whom you can hire at your convenience to address the ongoing business challenges

Let us help you build a modern digital business to overcome traditional culture and succeed in the age of digital transformation.

  • USA
  • Canada
  • Australia
  • India
  • UAE
  • Sweden

USA

Bacancy Technology LLC

Florida

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Canada

Bacancy Technology Inc

Toronto

71 Dawes Road, Brampton, On L6X 5N9, Toronto

Phone

+1 416 907 6738

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Australia

Bacancy Technology

South Australia

351A Hampstead Rd, Northfield SA 5085

Phone

(02) 8005 8222

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

India

Bacancy Technology Pvt Ltd

Ahmedabad

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

Pune

2nd Floor, Marisoft-1, Marigold IT Park, Pune

Phone

079- 40037674

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

UAE

Bacancy Technology

Dubai

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Sweden

Bacancy Technology

Hagersten

Junkergatan 4, 126 53 Hagersten

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

How Can We Help?

  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solution
  • Contact Us
DMCA.com Protection Status
Request A Free Consultation