• Components can now access the SSR context as this.$ssrContext
• Internal improvements for handling functional *.vue components style SSR injections

Fixed

• #5536 fix regression when render function returns null (@gebilaoxiong via #5539)
• #5540 vue-server-renderer/server-plugin: ensure assets are unique (@pi0 via #5540)
• #5553 vue-server-renderer/server-plugin: avoid swallowing webpack error when entry is not found
• #5559 vue-server-renderer: with runInNewContext: false, the bundle is now indeed executed in the same context. The 2.3.0 behavior is still available behind a new option value runInNewContext: 'once'. See docs for more details.

"It was me, Dio!"

🚀 New

Server-Side Rendering Improvements

Note: We have created a brand-new standalone guide for server-side rendering in Vue, it's a recommended read for all users. Also, the HackerNews demo has been updated to reflect the latest best practices.

• Now uses the data-server-rendered attribute to indicate server-rendered markup, making the output valid HTML.

• template option now supports simple interpolation using the render context. This allows the template to be dynamic based on the data attached to the context by rendered components.

  See docs for more details.

• New bundleRenderer option: runInNewContext

  Defaults to true, which preserves the original behavior.

  When set to false, the renderer will no longer re-execute the entire bundle in a new vm context for each render. Instead, only the function exported by the bundle will be called again. This greatly improves performance, but requires some changes in source code structure.

  See docs for more details.

• New bundleRenderer option: clientManifest

  By passing the bundleRender a client webpack build manifest generated by vue-server-renderer/client-plugin, the renderer can infer the proper build assets that need to be preloaded (e.g. code-split async chunks, images, and fonts). When using together with the template option, <link rel="preload/prefetch"> and appropriate <script> tags will be injected automatically.

  See docs for more details.

• vue-ssr-webpack-plugin is now deprecated, instead, it is now part of vue-server-renderer. It now also exposes two plugins - one for the server build and one for the client build.

  var VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
  var VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

  See docs for more details.

Async Component Improvements

• Async component factories can now return an object of the following format:

  const AsyncComp = () => ({
    // The component to load. Should be a Promise
    component: import('./MyComp.vue'),
    // A component to use while the async component is loading
    loading: LoadingComp,
    // A component to use if the load fails
    error: ErrorComp,
    // Delay before showing the loading component. Defaults to 200ms.
    delay: 200,
    // The error component will be displayed if a timeout is provided and exceeded.
    timeout: 3000
  })

  Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to update vue-router to 2.4.0+ if you wish to use the new syntax for route components.

Functional Component Improvements

• Functional components can now omit the props option. All attributes will be automatically extracted and exposed as camelized props on context.props.

  Note when the props option is provided, it will retain the old behavior - i.e. only explicitly declared props will be extracted.

• v-on listeners attached to a functional component will be exposed as context.listeners. This is simply an alias to context.data.on.

  Combined with the props change, functional components usage can be much cleaner:

  const MyComp = {
    functional: true,
    render (h, { props, listeners }) {
      return h('div', {
        on: {
          click: listeners.click // proxy click listener
        }
      }, [
        props.msg // auto extracted props
      ])
    )
  }

• Functional components now also support the inject option. Injected properties are exposed as context.injections. (@Kingwl via #5204)

Other Improvements

• .sync is back! However it now is simply syntax sugar that expands into a prop + listener pair, similar to v-model.

  The following

  <comp :foo.sync="bar"></comp>

  is expanded into:

  <comp :foo="bar" @update:foo="val => bar = val"></comp>

  For the child component to update foo's value, it needs to explicitly emit an event instead of mutating the prop:

  this.$emit('update:foo', newValue)

• Warnings now include component hierarchy traces.

• Vue.config.errorHandler now also handles error thrown inside custom directive hooks (@xijiongbo via #5324)

• Vue.config.errorHandler now also handles error thrown in nextTick callbacks.

• New v-on modifier: .passive - adds the event listener with { passive: true }. (@Kingwl via #5132)

• Props validation now supports type: Symbol.

• style bindings now support using an Array to provide multiple (prefixed) values to a property, so the following would be possible (@fnlctrl via #5460):

  <div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">

• An extended component constructor can now also be used as a mixin. (@ktsn via #5448)

🐛 Fixed

• #5238, #5387 fix v-model not syncing for autocomplete / switching focus before confirming composition
• #5318 fix style diffing on cached/slot elements
• #5346 fix keep-alive cache incorrectly pruned with transition mode="out-in"
• #5361 fix Symbol check error in Node 4.x
• #5394 fix duplicate attribute warning when using class and :class together in Edge
• #5398 fix v-model checkbox binding with Array index (@posva via #5402)
• #5464 fix incorrect compiler warning for $delete usage in templates
• #5480 allow slot names to be number 0 (@posva via #5481)
• #5526 fix text inside <script type="x/template"> being unnecessarily decoded
• vue-class-component#87 fix base class lifecycle hook dropped when constructor options are modified before applying global mixin

Fixed

• Fixed a memory leak issue when used with vue-router (vuejs/vue-router#1279)
• #5265 Warn when no getter is provided to a computed property (@kmc059000 via #5267)

Fixed

• #5191 fix events emitted from updated hook not triggering update (@Kingwl via #5233)
• #5209 fix performance tracing issue
• #5216 fix Vue.set crashing when used on Arrays with non-number key (@pkaminski via #5216)
• #5224 fix v-show not setting inline display property in SSR (@defcc via #5224)
• #5223 fix Array values injected via inject option not reactive (@Kingwl via #5229)
• #5243 trigger warning when mutating injected bindings (@rayrutjes via #5243)
• #5250 fix input[type=password] behavior in IE9 (@ktsn via #5253)

Fixed

• #5181 fixed 2.2.3 performance tracing regression for nested components with the same name.

Notable Changes

• Vue.config.performance now defaults to false due to its impact on dev mode performance. Only turn it on when you need it.

Improvements

• Now warns usage of camelCase props when using in-DOM templates. (@CodinCat via #5161)
• Now warns when template contains text outside of root element. (@xujiongbo via #5164)

Fixed

• #5121 parse content in textarea as plaintext (@HerringtonDarkholme via #5143)
• #5146, #5169, #5171 fix v-on .prevent modifier regression when combined with other key modifiers (@Kingwl via #5147)
• #5150 v-bind object should have lower priority than explicit bindings
• #5162 fix custom directive argument fallthrough
• #5174 fix ever-increasing component render time caused by calls to performance.measure in dev mode.

Fixed

• #5037 ssr: fix JSON file path detection in createBundleRenderer
• #5043 fix provide/inject for falsy values (@znck via #5044)
• #5046 fix v-on .left .right modifiers conflict between keyboard and mouse events
• #5055 handle values with circular reference in v-model bindings
• #5097 default slot should use fallback content when it contains all whitespace nodes
• #5120 fix v-on inline function expression with modifiers