fix(nuxt): move layout resolution to build time

This commit is contained in:
Daniel Roe 2023-10-16 11:38:15 +01:00
parent 78939769c9
commit 96f5400492
3 changed files with 7 additions and 54 deletions

View File

@ -47,46 +47,7 @@ export default defineComponent({
const injectedRoute = inject(PageRouteSymbol)
const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute
const layout = computed(() => {
const layoutName = unref(props.name) ?? route.meta.layout as string ?? 'default'
if (typeof layoutName === 'string') {
const layoutPath = layoutName.replace(/-/g, '/')
// Check if layout exists for example `desktop-default` will translate to `layouts/desktop/default`
if (layoutPath in layouts) {
return layoutPath
}
// Check if layout exists for example `desktop` or `desktop-index` will translate to ` `layouts/desktop/index`
if ((layoutPath + '/index') in layouts) {
return layoutPath + '/index'
}
// If the directory inside layouts has has a dash in the name such as `desktop-base` we need to check for that
if (layoutName.includes('-')) {
const layoutPath = layoutName.replace(/-/g, '/')
// Check if layout exists for example `desktop-base` will translate to `layouts/desktop/base`
if (layoutPath in layouts) {
return layoutPath
}
// Check if layout exists for example `desktop-base` will translate to `layouts/desktop-base/base`
const layoutPathLast = layoutName.split('-').pop()
if (layoutName + '/' + layoutPathLast in layouts) {
return layoutName + '/' + layoutPathLast
}
// Check if layout exists for example `desktop-base` will translate to `layouts/desktop-base/index`
if (layoutName + '/index' in layouts) {
return layoutName + '/index'
}
}
}
return layoutName
})
const layout = computed(() => unref(props.name) ?? route.meta.layout as string ?? 'default')
const layoutRef = ref()
context.expose({ layoutRef })

View File

@ -110,9 +110,9 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
app.layouts = {}
for (const config of nuxt.options._layers.map(layer => layer.config)) {
const layoutDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.layouts || 'layouts'
const layoutFiles = await resolveFiles(config.srcDir, `${layoutDir}/*{${nuxt.options.extensions.join(',')}}`)
const layoutFiles = await resolveFiles(config.srcDir, `${layoutDir}/**/*{${nuxt.options.extensions.join(',')}}`)
for (const file of layoutFiles) {
const name = getNameFromPathLocal(file, config.srcDir + '/layouts')
const name = getNameFromPathLocal(file, resolve(config.srcDir, layoutDir))
app.layouts[name] = app.layouts[name] || { name, file }
}
}

View File

@ -1,5 +1,6 @@
import { basename, extname } from 'pathe'
import { kebabCase } from 'scule'
import { withTrailingSlash } from 'ufo'
export function getNameFromPath (path: string) {
return kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
@ -9,16 +10,7 @@ export function hasSuffix (path: string, suffix: string) {
return basename(path).replace(extname(path), '').endsWith(suffix)
}
export function getNameFromPathLocal (path: string, src: string) {
const sourcePath = path
.replace(src + '/', '')
.split('/')
.slice(0, -1)
// .map(e => snakeCase(e))
.join('/')
return (
sourcePath +
(sourcePath ? '/' : '') +
kebabCase(basename(path).replace(extname(path), '')).replace(/["']/g, '')
)
export function getNameFromPathLocal (path: string, localDir: string) {
const file = path.replace(withTrailingSlash(localDir), '')
return getNameFromPath(file.replace(/[\\/]+/g, '-').replace(/\/index\.\w+$/, ''))
}