I am not sure if it's the best way to go, but I thought that leaving the transition wrapper outside the components would leave more freedom to integrate it as required (for example with or without keep-alive, custom events callbacks, etc).

With that in mind and taking as example a modal component it would usually have a show prop used to control the modal display. Transition expects v-show to know when to start and to avoid this kind of code <modal v-show="show" :show="show" /> the v-show would be set in the component root directly. The final code with transition would be simple as

<transition>
  <modal show="show" />
<transition>

But that would not work as transition expects v-show right there. There is a jsfiddle that illustrate the issue (just ignore the badly implemented transition css...).

I see two ways to solve this:

1. Make transition be aware of v-show set on the root it self
2. Make available some event or way to trigger a transition programatically. That way from the compnent it self we could decide when that should happen.

Vue.js version

2.0.0-rc1

Reproduction Link

https://jsfiddle.net/miljan/8Lca03gb/

Steps to reproduce

Try opening the modal

What is Expected?

To open with a transition, which does happen if you set v-show again in the component declaration.

What is actually happening?

It opens without a transition.