use router-view element directive

Author: yyx990803

example/example.js

@@ -12,7 +12,7 @@ var root = new Vue({
   el: '#app',
   components: {
     inbox: {
-      template: '<div><h2>inbox!</h2><div v-view></div></div>',
+      template: '<div><h2>inbox!</h2><router-view></router-view>',
       replace: true,
       components: {
         message: {
@@ -26,7 +26,7 @@ var root = new Vue({
       }
     },
     user: {
-      template: '<h2>User yo</h2><div v-view></div>',
+      template: '<h2>User yo</h2><router-view></router-view>',
       components: {
         'user-profile': {
           template: 'user profile {{route.params.userId}} {{route.params.something}}'

example/index.html

@@ -12,7 +12,7 @@ <h1>App Header</h1>
   <a v-link="/inbox/message/123">inbox</a>
   <a v-link="/about">about</a>
   <a v-link="/user/1234">user</a>
-  <div v-view class="test" v-transition="test" transition-mode="out-in"></div>
+  <router-view class="test" v-transition="test" transition-mode="out-in"></router-view>
 </div>
 
 <script src="/example.build.js"></script>

package.json

@@ -34,6 +34,7 @@
     "webpack": "^1.8.11"
   },
   "dependencies": {
-    "route-recognizer": "^0.1.5"
+    "route-recognizer": "^0.1.5",
+    "insert-css": "^0.2.0"
   }
 }

src/view.js

@@ -2,8 +2,12 @@
 
 module.exports = function (Vue) {
 
+  // insert global css to make sure router-view has
+  // display:block so that transitions work properly
+  require('insert-css')('router-view{display:block;}')
+
   var _ = Vue.util
-  var component = Vue.directive('component')
+  var component = Vue.directive('_component')
   var templateParser = Vue.parsers.template
 
   // v-view extends v-component
@@ -96,6 +100,5 @@ module.exports = function (Vue) {
 
   })
 
-  Vue.directive('view', viewDef)
-  Vue.config._terminalDirectives.push('view')
+  Vue.elementDirective('router-view', viewDef)
 }