layout frontmatter

[PhE]

Setting the layout in the frontmatter section of a content page has no effect or raise an error.

Since the layout is set in the pages/[...slug].vue page :

definePageMeta({
  layout: 'docs'
});

... I change it a bit to read the frontmatter layout prop:

const targetLayout = page.value?.layout || 'docs';
console.debug({ targetLayout });
definePageMeta({
  layout: targetLayout,
});

But I get this error (after a cold nuxt restart) :

[nuxt] [request error] [unhandled] [500] targetLayout is not defined

Here is the stackblitz playground

[atinux]

Hi @PhE

definePageMeta is a Vue Macro which cannot access the value defined in the Vue page, so quite impossible to get it with data-fetching inside the component itself. Since the layout lives as a parent, changing it will mean to re-render the page itself, etc.

I highly suggest to create another page instead where you define the other layout you want to apply (ex: pages/blog/[...slug].vue where you set definePageMeta({ layout: 'blog' })

[PhE]

Thanks @Atinux, I will follow your suggestion.

Does it means that the layout prop will not be supported anymore in nuxt content frontmatter ?

[atinux]

Well it is only when using the document-driven mode for now but I won't consider it as a best practice.

What would be your use case to define the layout in the frontmatter?

[PhE]

Our app works mostly with PDF files and YAML files (following JSON schemas). Those files represent business objects : checklist, check result, craft form, ...

We have a bunch of vue components and pages dealing with those files (from a s3 bucket). This part is working quite fine.

The /content is not the usual separated docs app. We have it with the app. A kind of knowledge base where all the business objects are spread in a hierarchy authored by the business experts (ideally with Nuxt Studio with a lot of MDC).

So when we display a content page we would like to choose the default layout (docs) or the one specified in the front matter.

Does it make sense ?

[atinux]

I see what you mean @PhE

Could you try by setting layout: false and setting the <NuxtLayout> within the dynamic page instead?

See https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis

[PhE]

So it's better to mess with the layout through <NuxtLayou> rather than definePageMeta(). Ok.

How to access the page frontmatter and feed the layout ?

I have a /app.vue with :

<template>
  <div>
    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
    [...]
  </div>
</template>

and a [...slug].vue with:

<script setup lang="ts">
[...]
const { data: page } = await useAsyncData(route.path, () =>
[...]
</script>

<template>
  <UPage>
   [...]
  </UPage>
</template>

I think about moving the <NuxtLayout> down to the [..slug] page. Is it correct ? I tend to not modify the structure of those files from the docs template.

I'm going deep on this question to get the right answer instead of the usual hacks I used to write. At this stage of our project, I need to catch the spirit of Nuxt :wink: : On one side, It is super easy to build stuff with Nuxt. On the other side, you feel terrible when everything broke and you realize you don't understand some obscure inner behavior.

It's not a rant. I'm just trying to advocate for the use of Nuxt I dream of : a high level tool where you can focus on content without top JS/TS skills ... saving our brains for the other parts of the project !

[atinux]

I think about moving the down to the [..slug] page. Is it correct ?

yes that should be the way

I tend to not modify the structure of those files from the docs template.

You should be free to update how you want, this template is to show how you can use the Nuxt UI Pro components easily :)

I understand your comment, Nuxt 3 is still young (1yo) and we are keep improving the usage day by day.

[PhE]

We fallback to a more common approach (thanks to nuxt ui pro saas template).

I have no doubt the nuxt3 kid is growing fast and may soon cover this use case.