Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-21 16:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): allow customising fallback layout (#24777)

Browse Source
This commit is contained in:
Daniel Roe 2023-12-15 17:30:45 +00:00 committed by GitHub
parent 4676fd0aa7
commit e972c226d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/nuxt/src/app/components/nuxt-layout.ts
View File

@ -42,6 +42,10 @@ export default defineComponent({
name: { name: {
type: [String, Boolean, Object] as unknown as () => unknown extends PageMeta['layout'] ? MaybeRef<string | false> : PageMeta['layout'], type: [String, Boolean, Object] as unknown as () => unknown extends PageMeta['layout'] ? MaybeRef<string | false> : PageMeta['layout'],
default: null default: null
},
fallback: {
type: [String, Object] as unknown as () => unknown extends PageMeta['layout'] ? MaybeRef<string> : PageMeta['layout'],
default: null
} }
}, },
setup (props, context) { setup (props, context) {
@ -50,7 +54,18 @@ export default defineComponent({
const injectedRoute = inject(PageRouteSymbol) const injectedRoute = inject(PageRouteSymbol)
const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute
const layout = computed(() => unref(props.name) ?? route.meta.layout as string ?? 'default') const layout = computed(() => {
let layout = unref(props.name) ?? route.meta.layout as string ?? 'default'
if (layout && !(layout in layouts)) {
if (import.meta.dev && layout !== 'default') {
console.warn(`Invalid layout \`${layout}\` selected.`)
}
if (props.fallback) {
layout = unref(props.fallback)
}
}
return layout
})
const layoutRef = ref() const layoutRef = ref()
context.expose({ layoutRef }) context.expose({ layoutRef })
@ -63,10 +78,6 @@ export default defineComponent({
return () => { return () => {
const hasLayout = layout.value && layout.value in layouts const hasLayout = layout.value && layout.value in layouts
if (import.meta.dev && layout.value && !hasLayout && layout.value !== 'default') {
console.warn(`Invalid layout \`${layout.value}\` selected.`)
}
const transitionProps = route.meta.layoutTransition ?? defaultLayoutTransition const transitionProps = route.meta.layoutTransition ?? defaultLayoutTransition
// We avoid rendering layout transition if there is no layout to render // We avoid rendering layout transition if there is no layout to render