Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(nuxt): define layouts as async vue components (#29957)

Browse Source
This commit is contained in:
Daniel Roe 2024-11-17 17:06:03 -05:00
parent c576d8b383
commit c4ede9bee3
No known key found for this signature in database
GPG Key ID: CBC814C393D93268
2 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,6 @@ import layouts from '#build/layouts'
// @ts-expect-error virtual file
import { appLayoutTransition as defaultLayoutTransition } from '#build/nuxt.config.mjs'
// TODO: revert back to defineAsyncComponent when https://github.com/vuejs/core/issues/6638 is resolved
const LayoutLoader = defineComponent({
name: 'LayoutLoader',
inheritAttrs: false,
@ -24,13 +23,10 @@ const LayoutLoader = defineComponent({
name: String,
layoutProps: Object,
},
async setup (props, context) {
setup (props, context) {
// This is a deliberate hack - this component must always be called with an explicit key to ensure
// that setup reruns when the name changes.
const LayoutComponent = await layouts[props.name]().then((r: any) => r.default || r)
return () => h(LayoutComponent, props.layoutProps, context.slots)
return () => h(layouts[props.name], props.layoutProps, context.slots)
},
})

3
packages/nuxt/src/core/templates.ts
View File

@ -299,9 +299,10 @@ export const layoutTemplate: NuxtTemplate = {
filename: 'layouts.mjs',
getContents ({ app }) {
const layoutsObject = genObjectFromRawEntries(Object.values(app.layouts).map(({ name, file }) => {
return [name, genDynamicImport(file)]
return [name, `defineAsyncComponent(${genDynamicImport(file)})`]
}))
return [
`import { defineAsyncComponent } from 'vue'`,
`export default ${layoutsObject}`,
].join('\n')
},