diff --git a/docs/content/en/2.concepts/8.nuxt.md b/docs/content/en/2.concepts/8.nuxt.md
index 63d747cbf..aa8b3a378 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]
+
+
+
Hello
+
+
+```
+
+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]
+
+
+
Bonjour
+
+
+```
+
+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..d94be5aed
--- /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 {}