Vue.js 2.1: What's New, Release History & EOL Status

What Is New in Vue.js 2.1

Vue 2.1 introduces several key enhancements focused on component composition and developer experience. The update brings more flexible slot mechanics, finer control over HTML attributes, and improvements to existing features like v-model and v-once.

How do scoped slots improve component reusability?

Scoped slots are the standout feature in 2.1, fundamentally changing how components pass data to their slot content. Previously, a slot had no access to data from the child component. Now, you can expose data from the child to the parent's slot template, enabling highly reusable and composable component patterns.

In practice, this is a game-changer for building data-agnostic layout components or complex renderless logic components. You define a slot in the child component and bind attributes to it. The parent can then use a special slot-scope attribute to capture that data and decide exactly how to render it.

<!-- Child Component -->
<slot :user="user"></slot>

<!-- Parent Template -->
<child-component>
  <template slot-scope="props">
    {{ props.user.name }}
  </template>
</child-component>

What does the new model option do for custom v-model?

The model option gives you explicit control over which prop and event a custom component uses for v-model two-way binding. Before 2.1, v-model on a component always used value as the prop and input as the event, which was limiting for components like checkboxes or select inputs.

This matters because it decouples the component's internal logic from the v-model contract. You can now define a component that uses a checked prop and a change event but still cleanly supports v-model from a parent.

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked'],
  template: `...`
})

How does inheritAttrs work with $attrs?

The inheritAttrs: false option and the new $attrs instance property work together to give you precise control over where HTML attributes fall through. By default, non-prop attributes bind to the root element of a component. Setting inheritAttrs to false stops this automatic behavior.

You can then manually decide where to apply these attributes using v-bind="$attrs". This is incredibly useful for creating base components that need to pass attributes like placeholder or aria-* labels to a specific inner element, not the wrapper root.

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input v-bind="$attrs" v-bind:value="value" @input="$emit('input', $event.target.value)">
    </label>
  `
})

What performance gains does v-once get?

The v-once directive received a significant internal optimization. It's now more efficient when used in conjunction with v-if and v-for. The Vue compiler can better optimize these static sub-trees, reducing the overhead during re-renders.

For SSR, this translates to faster server-side rendering because these static nodes are compiled into simpler string concatenation functions. In practice, you'll see the most benefit in large lists where parts of the item template are static and won't change.