mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-30 09:27:13 +00:00
add component nuxt-child
This commit is contained in:
parent
1c4e767850
commit
b6b1fc3073
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Dynamic nested route example</h1>
|
<h1>Dynamic nested route example</h1>
|
||||||
<router-view></router-view>
|
<nuxt-child></nuxt-child>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
38
lib/app/components/nuxt-child.vue
Normal file
38
lib/app/components/nuxt-child.vue
Normal 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>
|
@ -5,11 +5,14 @@ import Meta from 'vue-meta'
|
|||||||
import router from './router.js'
|
import router from './router.js'
|
||||||
<% if (store) { %>import store from '~store/index.js'<% } %>
|
<% if (store) { %>import store from '~store/index.js'<% } %>
|
||||||
import NuxtContainer from './components/nuxt-container.vue'
|
import NuxtContainer from './components/nuxt-container.vue'
|
||||||
|
import NuxtChild from './components/nuxt-child.vue'
|
||||||
import Nuxt from './components/nuxt.vue'
|
import Nuxt from './components/nuxt.vue'
|
||||||
import App from '<%= appPath %>'
|
import App from '<%= appPath %>'
|
||||||
|
|
||||||
// Component: <nuxt-container>
|
// Component: <nuxt-container>
|
||||||
Vue.component(NuxtContainer.name, NuxtContainer)
|
Vue.component(NuxtContainer.name, NuxtContainer)
|
||||||
|
// Component: <nuxt-child>
|
||||||
|
Vue.component(NuxtChild.name, NuxtChild)
|
||||||
// Component: <nuxt>
|
// Component: <nuxt>
|
||||||
Vue.component(Nuxt.name, Nuxt)
|
Vue.component(Nuxt.name, Nuxt)
|
||||||
|
|
||||||
|
@ -150,6 +150,7 @@ function * generateRoutesAndFiles () {
|
|||||||
'router.js',
|
'router.js',
|
||||||
'server.js',
|
'server.js',
|
||||||
'utils.js',
|
'utils.js',
|
||||||
|
'components/nuxt-child.vue',
|
||||||
'components/nuxt-container.vue',
|
'components/nuxt-container.vue',
|
||||||
'components/nuxt.vue',
|
'components/nuxt.vue',
|
||||||
'components/nuxt-loading.vue'
|
'components/nuxt-loading.vue'
|
||||||
|
Loading…
Reference in New Issue
Block a user