0
# Page Layout Components
1

2
Core page layout and content display components including main layout system, homepage hero layout, and page content management.
3

4
## Capabilities
5

6
### Layout Component
7

8
Main layout component that provides the complete page structure with navbar, sidebar, and content areas.
9

10
```javascript { .api }
11
/**
12
 * Main page layout Vue component
13
 * Available as layouts/Layout.vue
14
 */
15
const Layout: VueComponent = {
16
  name: 'Layout',
17
  components: {
18
    Home: Object,
19
    Navbar: Object, 
20
    Page: Object,
21
    Sidebar: Object
22
  },
23
  slots: {
24
    'sidebar-top': {},    // Top of sidebar area
25
    'sidebar-bottom': {}, // Bottom of sidebar area  
26
    'page-top': {},       // Top of page content
27
    'page-bottom': {}     // Bottom of page content
28
  },
29
  data() {
30
    return {
31
      isSidebarOpen: Boolean
32
    };
33
  },
34
  computed: {
35
    shouldShowNavbar: Boolean,
36
    shouldShowSidebar: Boolean,
37
    pageClasses: Array,
38
    sidebarItems: Array
39
  },
40
  methods: {
41
    toggleSidebar(to?: boolean): void,
42
    onTouchStart(e: TouchEvent): void,
43
    onTouchEnd(e: TouchEvent): void
44
  }
45
};
46
```
47

48
**Slots:**
49

50
- `sidebar-top`: Content at top of sidebar
51
- `sidebar-bottom`: Content at bottom of sidebar  
52
- `page-top`: Content at top of page
53
- `page-bottom`: Content at bottom of page
54

55
**Usage:**
56

57
```vue
58
<template>
59
  <Layout>
60
    <template #page-top>
61
      <div>Custom header content</div>
62
    </template>
63
    <template #page-bottom>
64
      <div>Custom footer content</div>
65
    </template>
66
  </Layout>
67
</template>
68
```
69

70
### 404 Layout Component
71

72
Error page layout component with random error messages and home navigation.
73

74
```javascript { .api }
75
/**
76
 * 404 error page layout Vue component
77
 * Available as layouts/404.vue
78
 */
79
const NotFoundLayout: VueComponent = {
80
  methods: {
81
    getMsg(): string
82
  }
83
};
84
```
85

86
The 404 component randomly selects from predefined error messages:
87
- "There's nothing here."
88
- "How did we get here?"  
89
- "That's a Four-Oh-Four."
90
- "Looks like we've got some broken links."
91

92
### Home Component
93

94
Homepage hero layout component for documentation landing pages.
95

96
```javascript { .api }
97
/**
98
 * Homepage hero layout Vue component
99
 * Available as @theme/components/Home.vue
100
 */
101
const Home: VueComponent = {
102
  name: 'Home',
103
  computed: {
104
    data(): object,
105
    actionLink(): object
106
  }
107
};
108
```
109

110
**Frontmatter Configuration:**
111

112
```yaml
113
---
114
home: true
115
heroImage: /hero.png
116
heroText: Hero Title
117
tagline: Hero subtitle
118
actionText: Get Started →
119
actionLink: /guide/ 
120
features:
121
  - title: Feature 1
122
    details: Feature 1 description
123
  - title: Feature 2  
124
    details: Feature 2 description
125
  - title: Feature 3
126
    details: Feature 3 description
127
footer: MIT Licensed | Copyright © 2018-present
128
---
129
```
130

131
### Page Component
132

133
Standard page content wrapper component that handles regular documentation pages.
134

135
```javascript { .api }
136
/**
137
 * Standard page content wrapper Vue component
138
 * Available as @theme/components/Page.vue
139
 */
140
const Page: VueComponent = {
141
  name: 'Page',
142
  props: {
143
    sidebarItems: {
144
      type: Array,
145
      default: () => []
146
    }
147
  },
148
  slots: {
149
    top: {},    // Top of page content
150
    bottom: {}  // Bottom of page content
151
  }
152
};
153
```
154

155
**Props:**
156

157
- `sidebarItems` (Array): Sidebar navigation items for current page
158

159
**Slots:**
160

161
- `top`: Content at top of page
162
- `bottom`: Content at bottom of page
163

164
### PageEdit Component
165

166
Component that displays edit page links, last updated information, and contributor details.
167

168
```javascript { .api }
169
/**
170
 * Page edit links and metadata Vue component
171
 * Available as @theme/components/PageEdit.vue
172
 */
173
const PageEdit: VueComponent = {
174
  name: 'PageEdit',
175
  computed: {
176
    lastUpdated(): string,
177
    lastUpdatedText(): string,
178
    editLink(): string,
179
    editLinkText(): string
180
  },
181
  methods: {
182
    createEditLink(repo: string, docsRepo: string, docsDir: string, docsBranch: string, path: string): string,
183
    endingSlashRE: RegExp
184
  }
185
};
186
```
187

188
**Configuration:**
189

190
```javascript
191
// VuePress config
192
module.exports = {
193
  themeConfig: {
194
    // Repository info
195
    repo: 'vuejs/vuepress',
196
    repoLabel: 'GitHub',
197
    
198
    // Edit links
199
    editLinks: true,
200
    editLinkText: 'Edit this page on GitHub',
201
    docsDir: 'docs',
202
    docsBranch: 'master',
203
    
204
    // Last updated
205
    lastUpdated: 'Last Updated'
206
  }
207
}
208
```
209

210
### PageNav Component
211

212
Next/previous page navigation component for sequential page browsing.
213

214
```javascript { .api }
215
/**
216
 * Next/previous page navigation Vue component
217
 * Available as @theme/components/PageNav.vue
218
 */
219
const PageNav: VueComponent = {
220
  name: 'PageNav',
221
  computed: {
222
    prev(): object | null,
223
    next(): object | null
224
  },
225
  methods: {
226
    resolvePrev(page: object, items: Array): object | null,
227
    resolveNext(page: object, items: Array): object | null,
228
    find(page: object, items: Array, offset: number): object | null,
229
    isString(v: any): boolean
230
  }
231
};
232
```
233

234
**Configuration:**
235

236
```yaml
237
---
238
# Frontmatter configuration
239
prev: /previous-page/
240
next: /next-page/
241

242
# Or disable navigation
243
prev: false
244
next: false
245
---
246
```
247

248
## Layout Behavior
249

250
### Responsive Design
251

252
All layout components adapt to different screen sizes:
253

254
- **Desktop**: Full navbar + sidebar layout
255
- **Tablet**: Collapsible sidebar with overlay
256
- **Mobile**: Hidden sidebar with hamburger menu
257

258
### Touch Navigation
259

260
Layout supports touch gestures on mobile:
261

262
- Swipe right to open sidebar
263
- Swipe left to close sidebar  
264
- Touch outside sidebar to close
265

266
### Page Classes
267

268
The Layout component applies CSS classes based on page state:
269

270
```javascript { .api }
271
interface PageClasses {
272
  'theme-container': boolean;
273
  'sidebar-open': boolean;
274
  'no-navbar': boolean;
275
  'no-sidebar': boolean;
276
}
277
```
278

279
## Frontmatter Configuration
280

281
Pages can be configured via frontmatter:
282

283
```yaml
284
---
285
# Homepage
286
home: true
287
heroImage: /hero.png
288
heroText: Site Title
289
tagline: Site description
290
actionText: Get Started
291
actionLink: /guide/
292

293
# Regular page
294
navbar: true
295
sidebar: true
296
prev: /previous/
297
next: /next/
298

299
# Custom layout
300
layout: CustomLayout
301
---
302
```