Monday, 16 October, 2017 UTC

Upgrading to Vue.js 2.5

Upgrading to Vue.js 2.5

Summary

Vue 2.5 was just released, adding a few new convenience features, cleaning up a bit under the hood, and improving tooling support in a number of areas. The most interesting change this round for most people will be the vastly improved Typescript support, but there are a number of other gems as well.
As always, make sure you update all of Vue's tooling and related libraries along with the core vue library itself, in order to minimize things going wrong. Stuff like vue-loader, vue-template-compiler, vue-server-renderer, and typescript.
Official Roadmap!
There is now an official Vue.js roadmap detailing future plans, responsibilities, and events. Take a look!
New Features

Improved TypeScript support

Vue has always been a bit tricky to work with when using TypeScript. Because of it’s object-based configuration, it tends to be difficult to define proper typings for, and single-file components don’t lint as well as normal JS files.
However, with this release, a number of people from the TypeScript team made some big changes to Vue to add all sorts of cool features when working with TypeScript.
Now, as a result, in Vue 2.5 you can get builtin autocomplete suggestions and type hints even if you’re not using TypeScript. This works with any editor that supports the language-server-protocol through vue-language-server. Right now that’s mainly Visual Studio Code + Vetur.
For more information, see this post by Evan You.
Upgrading
  • For existing TypeScript users, you’ll need to upgrade to at least TypeScript 2.4 if you wish to use TypeScript with Vue 2.5.
  • If you’re using CommonJS style imports (require(...)), you’ll need to switch to ES-style imports (import x from x). You can also remove "allowSyntheticDefaultImports": true, from your tsconfig.json.
  • You will need to upgrade all Vue libraries, including: vuex, vue-router, vuex-router-sync, and vue-class-component.
  • If you’re extending Vue using namespace Vue, you’ll need to switch that to use interface VueConstructor as seen here.
  • You may have to adjust your type declarations for computed, watch, render, and lifecycle hooks that reference the Vue component in some cases.

Functional Single-File-Components

Templates now support the functional attribute, which means it is now possible to write functional components without using render functions or JSX directly.
Functional components do not have an instance, and thus no bound context. As a result of this, you must refer to props on the component with props.myProp instead of myProp.
For example:
Normal Component
<template> <p>{{myProp}}</p> </template>
Functional Component
<template functional> <p>{{props.myProp}}</p> </template>
Functional SFCs now also support scoped CSS and hot-reloading. 🤓

Environment-Agnostic server-side rendering

A node-free build of vue-server-renderer has been built for this release that effectively allows running the renderer on most JS platforms, even without Node.js. This allows you to potentially render Vue apps from JS runtimes in PHP and Java server applications.
For more details, take a look here.

slot-scope prop

To define scoped slots, you previously had to wrap the contents in a template with the scope attribute.
As of Vue 2.5, you may now declare scoped slots with the slot-scope attribute which replaces the now-deprecated scope attribute. This attribute now can be used on normal components and elements without requiring a template wrapper.
So you can use
<template> <div slot-scope="myScopedObj"> {{myScopedObj.thingy}} // Contents </div> </template>
instead of
<template> <template scope="myScopedObj"> <div> {{myScopedObj.thingy}} // Contents </div> </template> </template>

Other

  • Injected properties can now declare default values in the same way as props can.
  • The component instance is now passed as the first argument to the data function, meaning that arrow-function data initializers are good again? 
    data: (componentInstance) => ({ myDataThing: componentInstance.myProp })
  • There is now a build of vue-template-compiler that can run directly in the browser.
  • config.ignoredElements can now ignore by RegEx instead of just strings. This is great for working with libraries that provide custom elements with a prefix. (ex. ion-*)
  • v-on now supports all keys provided by KeyboardEvent.key as kebab-cased modifiers. For example, @keyup.arrow-up=... is now valid.
  • v-on now has an .exact modifier that matches only the exact modifier keys are pressed at the time of the event. For example, @keydown.a.shift fires even with SHIFT+CTRL+A, while @keydown.a.shift.exact only accepts SHIFT+A.
  • Components can now capture errors thrown from their children using the new errorCaptured hook.
  • Over 15 bugs were fixed.
For more information, see the (incredibly well-made) release details.

... more @ alligator.io

alligator.io