From d0181ded704f5215932c18d12b5f8fc3e8d4e09c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Thu, 2 Oct 2025 20:20:56 +0200 Subject: [PATCH 1/3] feat(layouts): separate layouts for performance and expose page metas --- docs/content/en/2.concepts/8.nuxt.md | 45 +++++++++++++++++++------ docs/content/fr/2.concepts/8.nuxt.md | 46 ++++++++++++++++++++------ layer/app/app.vue | 2 ++ layer/app/layouts/default.vue | 27 +-------------- layer/app/layouts/docs.vue | 15 +++++++++ layer/app/pages/[[lang]]/[...slug].vue | 4 +++ layer/shared/types/docus.d.ts | 15 +++++++++ 7 files changed, 106 insertions(+), 48 deletions(-) create mode 100644 layer/app/layouts/docs.vue create mode 100644 layer/shared/types/docus.d.ts diff --git a/docs/content/en/2.concepts/8.nuxt.md b/docs/content/en/2.concepts/8.nuxt.md index 63d747cbf..eefda6b9d 100644 --- a/docs/content/en/2.concepts/8.nuxt.md +++ b/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] + +``` + +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] + +``` + + +## 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] ``` \ No newline at end of file diff --git a/docs/content/fr/2.concepts/8.nuxt.md b/docs/content/fr/2.concepts/8.nuxt.md index c8f6f4ec6..aa8150b86 100644 --- a/docs/content/fr/2.concepts/8.nuxt.md +++ b/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] + +``` + +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] + +``` + + +## 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] -``` +``` \ No newline at end of file diff --git a/layer/app/app.vue b/layer/app/app.vue index 1de17a33d..a1003cc2d 100644 --- a/layer/app/app.vue +++ b/layer/app/app.vue @@ -61,9 +61,11 @@ provide('navigation', navigation) + + -import type { ContentNavigationItem } from '@nuxt/content' -import { flattenNavigation } from '../utils/navigation' - -const route = useRoute() -const docsNavigation = inject>('navigation') -const docsLink = computed(() => flattenNavigation(docsNavigation?.value)) -const isDocs = computed(() => docsLink.value.findIndex(item => item.path === route.path) !== -1) - - diff --git a/layer/app/layouts/docs.vue b/layer/app/layouts/docs.vue new file mode 100644 index 000000000..bb69a7c8a --- /dev/null +++ b/layer/app/layouts/docs.vue @@ -0,0 +1,15 @@ + diff --git a/layer/app/pages/[[lang]]/[...slug].vue b/layer/app/pages/[[lang]]/[...slug].vue index 8d3fbe6a3..696a0a3c9 100644 --- a/layer/app/pages/[[lang]]/[...slug].vue +++ b/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() diff --git a/layer/shared/types/docus.d.ts b/layer/shared/types/docus.d.ts new file mode 100644 index 000000000..e4f54627a --- /dev/null +++ b/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 {} \ No newline at end of file From 463fa56b0ef2b1407cf460561cc38e5c66860e8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Thu, 2 Oct 2025 20:41:17 +0200 Subject: [PATCH 2/3] lint fix --- layer/shared/types/docus.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layer/shared/types/docus.d.ts b/layer/shared/types/docus.d.ts index e4f54627a..d94be5aed 100644 --- a/layer/shared/types/docus.d.ts +++ b/layer/shared/types/docus.d.ts @@ -12,4 +12,4 @@ declare module '#app' { footer?: boolean } } -export {} \ No newline at end of file +export {} From 3e9a5aae98d935f30699b7b8b453bce353116535 Mon Sep 17 00:00:00 2001 From: Baptiste Leproux Date: Mon, 6 Oct 2025 10:56:21 +0200 Subject: [PATCH 3/3] Update docs/content/en/2.concepts/8.nuxt.md --- docs/content/en/2.concepts/8.nuxt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/en/2.concepts/8.nuxt.md b/docs/content/en/2.concepts/8.nuxt.md index eefda6b9d..aa8b3a378 100644 --- a/docs/content/en/2.concepts/8.nuxt.md +++ b/docs/content/en/2.concepts/8.nuxt.md @@ -109,7 +109,7 @@ definePageMeta({ layout: 'default', // Remove the header header: false, - // Remove the header + // Remove the footer footer: false, })