Vue 2.6 “Macross” Released

The Vue team announced yesterday the release of Vue version 2.6, which includes a new syntax for Vue slots. For the full details of Vue 2.6, check out Vue creator Evan You’s announcement post.

Vue 2.6 "Macross" has been released! https://t.co/NMR4TXxAEk

— Vue.js (@vuejs) February 4, 2019

New Slot Syntax

First up, the most significant change to Vue 2.6 is the new slot syntax which aligns Vue 2.6 slot syntax with Vue 3.0. The new syntax unifies the slot and slot-scope attributes we have in Vue 2.5 and earlier.

All of the following examples are from an RFC for new slot syntax.

Here’s an example of a default slot with the new and old styles:

<!-- old -->
<foo>
  <template slot-scope="{ msg }">
    {{ msg }}
  </template>
</foo>
 
<!-- new -->
<foo v-slot="{ msg }">
  {{ msg }}
</foo>

Named slots now look like the following:

<!-- old -->
<foo>
  <template slot="one" slot-scope="{ msg }">
    text slot: {{ msg }}
  </template>
 
  <div slot="two" slot-scope="{ msg }">
    element slot: {{ msg }}
  </div>
</foo>
 
<!-- new -->
<foo>
  <template v-slot:one="{ msg }">
    text slot: {{ msg }}
  </template>
 
  <template v-slot:two="{ msg }">
    <div>
      element slot: {{ two }}
    </div>
  </template>
</foo>

Error Handling

Vue 2.6 now captures errors on v-on handlers, and you can return a promise from any lifecycle hooks or event handlers where you need to perform async operations. Any uncaught errors are sent to Vue’s error handlers. Using async/await makes this super convenient—here’s an example from Vue’s official release announcement:

export default {
  async mounted() {
    // if an async error is thrown here, it now will get
    // caught by errorCaptured and Vue.config.errorHandler
    this.posts = await api.getPosts()
  }
}

Vue.observable

Another feature that stood out to me was the ability to create reactive objects with Vue.observable():

const reactiveState = Vue.observable({
  count: 0
})

Observable objects can be used directly in computed properties and render functions.

Source Range for Compiler Errors

Starting in Vue 2.6, template compile warnings have source range information. As a result, template warnings have code frames to make it easier to spot warnings in templates: