directory-structure.md - slidev

directory-structure.md

1	# Directory Structure
2
3	Slidev employs some directory structure conventions to minimize the configuration surface and to make the functionality extensions flexible and intuitive.
4
5	The conventional directory structure is:
6
7	```bash
8	your-slidev/
9	├── components/ # custom components
10	├── layouts/ # custom layouts
11	├── public/ # static assets
12	├── setup/ # custom setup / hooks
13	├── snippets/ # code snippets
14	├── styles/ # custom style
15	├── index.html # injections to index.html
16	├── slides.md # the main slides entry
17	└── vite.config.ts # extending vite config
18	```
19
20	All of them are optional.
21
22	## Components
23
24	Pattern: `./components/*.{vue,js,ts,jsx,tsx,md}`
25
26	<LinkCard link="guide/component" />
27
28	## Layouts
29
30	Pattern: `./layouts/*.{vue,js,ts,jsx,tsx}`
31
32	<LinkCard link="guide/layout" />
33
34	## Public
35
36	Pattern: `./public/*`
37
38	Assets in this directory will be served at root path `/` during dev, and copied to the root of the dist directory as-is. Read more about [Assets Handling](../guide/faq#assets-handling).
39
40	## Style
41
42	Pattern: `./style.css` \| `./styles/index.{css,js,ts}`
43
44	Files following this convention will be injected to the App root. If you need to import multiple CSS entries, you can create the following structure and manage the import order yourself.
45
46	:::warning
47	Global CSS here also applies to the presenter UI. Prefer scoping styles to individual slides, or wrap your selectors under `.slidev-layout` to avoid leaking styles into presenter mode.
48
49	Example: Use `.slidev-layout .grid { ... }` instead of just `.grid { ... }`.
50	:::
51
52	```bash
53	your-slidev/
54	├── ...
55	└── styles/
56	├── index.ts
57	├── base.css
58	├── code.css
59	└── layouts.css
60	```
61
62	```ts
63	// styles/index.ts
64
65	import './base.css'
66	import './code.css'
67	import './layouts.css'
68	```
69
70	Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use CSS nesting and [at-directives](https://unocss.dev/transformers/directives#apply) and Nested CSS out-of-box. For example:
71
72	<!-- eslint-skip -->
73
74	```css
75	.slidev-layout {
76	--uno: px-14 py-10 text-[1.1rem];
77
78	h1, h2, h3, h4, p, div {
79	--uno: select-none;
80	}
81
82	pre, code {
83	--uno: select-text;
84	}
85
86	a {
87	color: theme('colors.primary');
88	}
89	}
90	```
91
92	Learn more about the syntax [here](https://unocss.dev/transformers/directives#apply).
93
94	## `index.html`
95
96	Pattern: `index.html`
97
98	The `index.html` provides the ability to inject meta tags and/or scripts to the main `index.html`
99
100	For example, for the following custom `index.html`:
101
102	```html [index.html]
103	<head>
104	<link rel="preconnect" href="https://fonts.gstatic.com">
105	<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
106	</head>
107
108	<body>
109	<script src="./your-scripts"></script>
110	</body>
111	```
112
113	The final hosted `index.html` will be:
114
115	```html
116	<!DOCTYPE html>
117	<html lang="en">
118	<head>
119	<meta charset="UTF-8">
120	<meta name="viewport" content="width=device-width, initial-scale=1.0">
121	<link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png">
122	<!-- injected head -->
123	<link rel="preconnect" href="https://fonts.gstatic.com">
124	<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
125	</head>
126	<body>
127	<div id="app"></div>
128	<script type="module" src="__ENTRY__"></script>
129	<!-- injected body -->
130	<script src="./your-scripts"></script>
131	</body>
132	</html>
133	```
134
135	## Global Layers
136
137	Pattern: `global-top.vue` \| `global-bottom.vue` \| `custom-nav-controls.vue` \| `slide-top.vue` \| `slide-bottom.vue`
138
139	<LinkCard link="features/global-layers" />
140

140 lines MARKDOWN