feat(layouts): separate layouts for performance and expose page metas

docs/content/en/2.concepts/8.nuxt.md

@@ -37,7 +37,7 @@ export default defineNuxtConfig({
 ```
 ::
 
-## Custom components
+## Custom Components
 
 With the power of `Nuxt Content` and `Nuxt UI`, and with the help of the `MDC` syntax, you can use [Nuxt UI components](/en/essentials/components) directly in your Markdown without any extra configuration needed.
 
@@ -89,22 +89,45 @@ Here’s a simple example of a custom `BrowserFrame` component created in the `c
 
 This approach lets you create dynamic docs powered by Nuxt components using Markdown.
 
-## Custom Layouts
+## Vue Pages
 
-In Docus, the default layout contains the header and the footer of the application.
+In addition to Markdown pages, you can also create Vue pages in the `pages/` directory.
 
-::note{to="https://github.com/nuxt-content/docus/blob/main/layer/app/layouts/default.vue"}
-The default layout is used for both landing page and documentation pages. You can have a check at the code of the default layout to understand how it works.
-::
+```vue [pages/hello.vue]
+<template>
+  <div>
+    <h1>Hello</h1>
+  </div>
+</template>
+```
+
+You can also use the `definePageMeta` function to set the page meta, such as using the `default` or `docs` layout, but also to define if the page should display the header and the footer:
+
+```vue [pages/hello.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default',
+  // Remove the header
+  header: false,
+  // Remove the footer
+  footer: false,
+})
+</script>
+```
+
+
+## Custom Layouts
+
+Docus uses two layouts:
+- `default` layout for the landing page and custom Vue pages
+- `docs` layout for the documentation pages
 
-If you want to use a different layout, you just need to override the existing default by creating a `layouts/default.vue` file in your `app/` folder.
+If you want to use a different layout, you can create one in the `app/layouts/` directory.
 
-```vue [app/layouts/default.vue]
+```vue [app/layouts/custom.vue]
 <template>
-  <MyCustomHeader />
-  <main>
+  <main class="custom-layout">
     <slot />
   </main>
-  <MyCustomFooter />
 </template>
 ```

docs/content/fr/2.concepts/8.nuxt.md

@@ -89,22 +89,46 @@ Voici un exemple simple d'un composant personnalisé `BrowserFrame` créé dans
 
 Cette approche vous permet de créer une documentation dynamique propulsée par les composants Nuxt en Markdown.
 
-## Custom Layouts
 
-Dans Docus, le layout par défaut contient le header et le footer de l'application.
+## Vue Pages
 
-::note{to="https://github.com/nuxt-content/docus/blob/main/layer/app/layouts/default.vue"}
-Le layout par défaut est utilisé à la fois pour la home page et les pages de documentation. Vous pouvez consulter le code du layout par défaut pour comprendre son fonctionnement.
-::
+En plus des pages Markdown, vous pouvez également créer des pages Vue dans le répertoire `pages/`.
+
+```vue [pages/hello.vue]
+<template>
+  <div>
+    <h1>Bonjour</h1>
+  </div>
+</template>
+```
+
+Vous pouvez également utiliser la fonction `definePageMeta` pour définir les métadonnées de la page, comme l'utilisation du layout `default` ou `docs`, mais aussi pour définir si la page doit afficher l'en-tête et le pied de page :
+
+```vue [pages/hello.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default',
+  // Supprimer l'en-tête
+  header: false,
+  // Supprimer le pied de page
+  footer: false,
+})
+</script>
+```
+
+
+## Layouts personnalisées
+
+Docus utilise deux layouts :
+- Le layout `default` pour la page d'accueil et les pages Vue personnalisées
+- Le layout `docs` pour les pages de documentation
 
-Si vous souhaitez utiliser un layout différent pour votre documentation, il vous suffit de remplacer le layout existant en créant un fichier `layouts/default.vue` dans votre dossier `app/`.
+Si vous souhaitez utiliser une mise en page différente, vous pouvez en créer une dans le répertoire `app/layouts/`.
 
-```vue [app/layouts/default.vue]
+```vue [app/layouts/custom.vue]
 <template>
-  <MyCustomHeader />
-  <main>
+  <main class="custom-layout">
     <slot />
   </main>
-  <MyCustomFooter />
 </template>
-``` 
+```

layer/app/app.vue

@@ -61,9 +61,11 @@ provide('navigation', navigation)
   <UApp :locale="nuxtUiLocales[locale as keyof typeof nuxtUiLocales]">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
+    <AppHeader v-if="$route.meta.header !== false" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <AppFooter v-if="$route.meta.footer !== false" />
 
     <ClientOnly>
       <LazyUContentSearch

layer/app/layouts/default.vue

@@ -1,30 +1,5 @@
-<script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content'
-import { flattenNavigation } from '../utils/navigation'
-
-const route = useRoute()
-const docsNavigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-const docsLink = computed(() => flattenNavigation(docsNavigation?.value))
-const isDocs = computed(() => docsLink.value.findIndex(item => item.path === route.path) !== -1)
-</script>
-
 <template>
-  <AppHeader />
   <UMain>
-    <slot v-if="!isDocs" />
-    <UContainer v-else>
-      <UPage>
-        <template #left>
-          <UPageAside>
-            <DocsAsideLeftTop />
-
-            <DocsAsideLeftBody />
-          </UPageAside>
-        </template>
-
-        <slot />
-      </UPage>
-    </UContainer>
+    <slot />
   </UMain>
-  <AppFooter />
 </template>

layer/app/layouts/docs.vue

@@ -0,0 +1,15 @@
+<template>
+  <UMain>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <DocsAsideLeftTop />
+            <DocsAsideLeftBody />
+          </UPageAside>
+        </template>
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>

layer/app/pages/[[lang]]/[...slug].vue

@@ -4,6 +4,10 @@ import type { ContentNavigationItem, Collections, DocsCollectionItem } from '@nu
 import { findPageHeadline } from '@nuxt/content/utils'
 import { addPrerenderPath } from '../../utils/prerender'
 
+definePageMeta({
+  layout: 'docs',
+})
+
 const route = useRoute()
 const { locale, isEnabled, t } = useDocusI18n()
 const appConfig = useAppConfig()

layer/shared/types/docus.d.ts

@@ -0,0 +1,15 @@
+declare module '#app' {
+  interface PageMeta {
+    /**
+     * Define if the page should display the header
+     * @default true
+     */
+    header?: boolean
+    /**
+     * Define if the page should display the footer
+     * @default true
+     */
+    footer?: boolean
+  }
+}
+export {}