mirror of
https://github.com/wahyd4/vuepress.git
synced 2026-08-11 06:16:08 +10:00
39 lines
2.0 KiB
Markdown
39 lines
2.0 KiB
Markdown
# Configuration
|
|
|
|
## Config File
|
|
|
|
Without any configuration, the page is pretty minimal, and the user has no way to navigate around the site. To customize your site, let's first create a `.vuepress` directory inside your docs directory. This is where all VuePress-specific files will be placed in.
|
|
|
|
The essential file for configuring a VuePress site is `.vuepress/config.js`, which should export a JavaScript object:
|
|
|
|
``` js
|
|
module.exports = {
|
|
title: 'Hello VuePress',
|
|
description: 'Just playing around'
|
|
}
|
|
```
|
|
|
|
If you've got the dev server running, you should see the page now has a header with the title and a search box. VuePress comes with built-in headers-based search - it automatically builds a simple search index from the title, `h2` and `h3` headers from all the pages.
|
|
|
|
Consult the [Config Reference](../config/) for a full list of options.
|
|
|
|
## Theme Configuration
|
|
|
|
A VuePress theme is responsible for all the layout and interactivity details of your site. VuePress ships with a default theme (you are looking at it right now) which is designed for technical documentation. It exposes a number of options that allow you to customize the navbar, sidebar and homepage, etc. For details, check out the [Default Theme Config](../default-theme-config/) page.
|
|
|
|
If you wish to develop a custom theme, see [Custom Themes](./custom-themes.md).
|
|
|
|
## App Level Enhancements
|
|
|
|
Since the VuePress app is a standard Vue app, you can apply app-level enhancements by creating a file `.vuepress/enhanceApp.js`, which will be imported into the app if it is present. The file should `export default` a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:
|
|
|
|
``` js
|
|
export default ({
|
|
Vue, // the version of Vue being used in the VuePress app
|
|
options, // the options for the root Vue instance
|
|
router // the router instance for the app
|
|
}) => {
|
|
// ...apply enhancements to the app
|
|
}
|
|
```
|