What’s new in Vue?

New re­leases fo­cus on tools and ex­tras to make the de­vel­op­ment ex­pe­ri­ence a breeze

Web Designer - - Javascript: What’s New? -

The last size­able up­date to the core Vue plat­form – 2.5 – was back in Oc­to­ber last year. Be­ing a mi­nor re­lease, it only brought with it slight changes to the plat­form.

Im­proved er­ror han­dling

In pre­vi­ous ver­sions, er­ror han­dling was a prob­lem when­ever an un­ex­pected er­ror oc­curred. De­vel­op­ers could use the pro­vided ‘Vue.con­fig.er­rorhan­dler’ global method and ap­ply it across the whole ap­pli­ca­tion, or ‘ren­der­error’ in­side a com­po­nent. A more flex­i­ble so­lu­tion was re­quired: ex­port de­fault { [...] er­ror­cap­tured (err, vm, info) { this.er­ror = true } } In 2.5 Vue in­tro­duces the ‘er­ror­cap­tured’ hook that can live in­side a par­ent com­po­nent. This hook cap­tures any er­ror that oc­curs in­side a child, much like Re­act’s er­ror boundary con­cept. The ‘er­rorhan­dler’ global method can still be used with this new ap­proach. It makes an ideal place to re­port er­rors to third­party log­gers to keep an eye on er­rors thrown by the ap­pli­ca­tion.

Ver­sion 3 com­ing soon

A larger up­date is al­ready in the works. It will drop sup­port for browsers that do not sup­port ES2015 fea­tures, such as In­ter­net Ex­plorer 10. While its re­lease date has not yet been re­vealed, the de­vel­op­ment team have agreed to a six-month lead time be­tween an­nounce­ment and re­lease to be sure all is­sues are ironed out.

Vue CLI up­date

In the mean­time, em­pha­sis has been placed to im­prove the tool­ing sur­round­ing Vue. At the cen­tre of this is a ma­jor up­date to the com­mand line in­ter­face (CLI) used to stamp out starter projects. Pre­vi­ous ver­sions used the CLI to clone tem­plate starter projects. While this made it easy to get started, any up­dates to those tem­plates did not ben­e­fit projects al­ready gen­er­ated. The new CLI in­stead uses plug­ins that work in­de­pen­dently of each other. Fea­tures such as Vuex, Type­script and Es­lint can be added with the press of a but­ton. When one of these plug­ins gets up­dated, it gets pulled into that project like any other de­pen­dency. It hasn’t yet been of­fi­cially re­leased, but sta­ble ver­sions are be­ing pro­vided to try it out. Find out more about Vue CLI 3 at cli. vuejs.org.


Along­side the new CLI, a sep­a­rate in­ter­face in the browser has been de­vel­oped to help build and main­tain projects as they de­velop. When build­ing a new project, it works as a graph­i­cal in­ter­face for the CLI. It shows which plug­ins are avail­able, what they do and why they may be use­ful. Once a project is built, it can be main­tained in­side the new UI. Sep­a­rate tabs show out-of-date de­pen­den­cies, tasks that can be per­formed, and other plug­ins the project might ben­e­fit from. By run­ning the ‘build’ task, it can give in­stant feed­back of the progress, the size of the bun­dles and even where im­prove­ments can be made. De­vel­op­ers can cre­ate in­ter­faces for their own plug­ins also. The idea be­hind the new in­ter­face is to help those not con­fi­dent on the com­mand line get all the ben­e­fits it pro­vides, as well as pre­sent­ing the data in a more in­for­ma­tive way.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.