add nuxt-child and nuxt-link

lib/app/components/nuxt-child.js

@@ -0,0 +1,60 @@
+import Vue from 'vue'
+
+const transitionsKeys = [
+  'name',
+  'mode',
+  'css',
+  'type',
+  'enterClass',
+  'leaveClass',
+  'enterActiveClass',
+  'leaveActiveClass'
+]
+const listenersKeys = [
+  'beforeEnter',
+  'enter',
+  'afterEnter',
+  'enterCancelled',
+  'beforeLeave',
+  'leave',
+  'afterLeave',
+  'leaveCancelled'
+]
+
+export default {
+  name: 'nuxt-child',
+  functional: true,
+  render (h, { parent, data }) {
+    data.nuxtChild = true
+
+    const transitions = parent.$nuxt.nuxt.transitions
+    const defaultTransition = parent.$nuxt.nuxt.defaultTransition
+    let depth = 0
+    while (parent) {
+      if (parent.$vnode && parent.$vnode.data.nuxtChild) {
+        depth++
+      }
+      parent = parent.$parent
+    }
+    data.nuxtChildDepth = depth
+    const transition = transitions[depth] || defaultTransition
+    let transitionProps = {}
+    transitionsKeys.forEach((key) => {
+      if (typeof transition[key] !== 'undefined') {
+        transitionProps[key] = transition[key]
+      }
+    })
+    let listeners = {}
+    listenersKeys.forEach((key) => {
+      if (typeof transition[key] === 'function') {
+        listeners[key] = transition[key]
+      }
+    })
+    return h('transition', {
+      props: transitionProps,
+      on: listeners
+    }, [
+      h('router-view', data)
+    ])
+  }
+}

lib/app/components/nuxt-child.vue

@@ -1,36 +0,0 @@
-<template>
-  <transition :name="transition.name" :mode="transition.mode">
-    <router-view></router-view>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'nuxt-child',
-  props: {
-    transition: {
-      type: Object,
-      default: () => {
-        return {
-          hooks: false,
-          mode: 'out-in', // out-in ou in-out
-          name: 'fade',
-          type: '', // animation ou transition
-          enterClass: '',
-          enterActiveClass: '',
-          leaveClass: '',
-          leaveActiveClass: '',
-          beforeEnter: null, // Func
-          enter: null,
-          afterEnter: null,
-          enterCancelled: null,
-          beforeLeave: null,
-          leave: null,
-          afterLeave: null,
-          leaveCancelled: null
-        }
-      }
-    }
-  }
-}
-</script>

lib/app/components/nuxt-link.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+
+export default {
+  name: 'nuxt-link',
+  functional: true,
+  render (h, { data, children }) {
+    return h('router-link', data, children)
+  }
+}

lib/app/components/nuxt.vue

@@ -1,15 +1,14 @@
 <template>
   <div>
     <% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
-    <transition :name="nuxt.transition.name" :mode="nuxt.transition.mode">
+    <nuxt-child v-if="!nuxt.err"></nuxt-child>
-      <router-view v-if="!nuxt.err"></router-view>
     <nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error>
-    </transition>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
+import NuxtChild from './nuxt-child'
 import NuxtError from '<%= components.ErrorPage %>'
 <% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./nuxt-loading.vue") %>'<% } %>
 
@@ -47,6 +46,7 @@ export default {
   },
   <% } %>
   components: {
+    NuxtChild,
     NuxtError<%= (loading ? ',\n    NuxtLoading' : '') %>
   }
 }

lib/app/index.js

@@ -5,7 +5,8 @@ import Meta from 'vue-meta'
 import router from './router.js'
 <% if (store) { %>import store from '~store/index.js'<% } %>
 import NuxtContainer from './components/nuxt-container.vue'
-import NuxtChild from './components/nuxt-child.vue'
+import NuxtChild from './components/nuxt-child.js'
+import NuxtLink from './components/nuxt-link.js'
 import Nuxt from './components/nuxt.vue'
 import App from '<%= appPath %>'
 
@@ -13,6 +14,8 @@ import App from '<%= appPath %>'
 Vue.component(NuxtContainer.name, NuxtContainer)
 // Component: <nuxt-child>
 Vue.component(NuxtChild.name, NuxtChild)
+// Component: <nuxt-link>
+Vue.component(NuxtLink.name, NuxtLink)
 // Component: <nuxt>
 Vue.component(Nuxt.name, Nuxt)
 
@@ -46,16 +49,24 @@ const app = {
   router,
   <%= (store ? 'store,' : '') %>
   _nuxt: {
-    transition: Object.assign({}, defaultTransition),
+    defaultTransition: defaultTransition,
-    setTransition (transition) {
+    transitions: [ defaultTransition ],
+    setTransitions (transitions) {
+      if (!Array.isArray(transitions)) {
+        transitions = [ transitions ]
+      }
+      transitions = transitions.map((transition) => {
         if (!transition) {
           transition = defaultTransition
         } else if (typeof transition === 'string') {
           transition = Object.assign({}, defaultTransition, { name: transition })
+        } else {
+          transition = Object.assign({}, defaultTransition, transition)
         }
-      this.$options._nuxt.transition.name = transition.name
-      this.$options._nuxt.transition.mode = transition.mode
         return transition
+      })
+      this.$options._nuxt.transitions = transitions
+      return transitions
     },
     err: null,
     error (err) {

lib/build/index.js

@@ -151,10 +151,11 @@ function * generateRoutesAndFiles () {
     'router.js',
     'server.js',
     'utils.js',
-    'components/nuxt-child.vue',
     'components/nuxt-container.vue',
-    'components/nuxt.vue',
+    'components/nuxt-loading.vue',
-    'components/nuxt-loading.vue'
+    'components/nuxt-child.js',
+    'components/nuxt-link.js',
+    'components/nuxt.vue'
   ]
   let templateVars = {
     uniqBy: _.uniqBy,