add component nuxt-child

This commit is contained in:
Alexandre Chopin 2016-12-13 17:42:41 +01:00
parent 1c4e767850
commit b6b1fc3073
4 changed files with 43 additions and 1 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class="container">
<h1>Dynamic nested route example</h1>
<router-view></router-view>
<nuxt-child></nuxt-child>
</div>
</template>

View File

@ -0,0 +1,38 @@
<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 {
mode: 'out-in', // out-in ou in-out
name: 'fade',
type: '', // animation ou transition
enter: null, // isFunc = js, is String = css
enterActive: '',
beforeEnter: null, // Func
afterEnter: null,
enterCancelled: null,
leave: null, // isFunc = js, is String = css
leaveActive: '',
beforeLeave: null, // Func
afterLeave: null,
leaveCancelled: null,
appear: null, // isFunc = js, is String = css
appearClass: '',
appearActiveClass: '',
beforeAppear: null,
afterAppear: null
}
}
}
}
}
</script>

View File

@ -5,11 +5,14 @@ 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 Nuxt from './components/nuxt.vue'
import App from '<%= appPath %>'
// Component: <nuxt-container>
Vue.component(NuxtContainer.name, NuxtContainer)
// Component: <nuxt-child>
Vue.component(NuxtChild.name, NuxtChild)
// Component: <nuxt>
Vue.component(Nuxt.name, Nuxt)

View File

@ -150,6 +150,7 @@ function * generateRoutesAndFiles () {
'router.js',
'server.js',
'utils.js',
'components/nuxt-child.vue',
'components/nuxt-container.vue',
'components/nuxt.vue',
'components/nuxt-loading.vue'