import{_ as n,c as s,o as e,a}from"./app.54944ef9.js";const h='{"title":"Configuration","description":"","frontmatter":{},"headers":[{"level":2,"title":"Overview","slug":"overview"},{"level":2,"title":"Config Intellisense","slug":"config-intellisense"},{"level":2,"title":"Typed Theme Config","slug":"typed-theme-config"}],"relativePath":"guide/configuration.md","lastUpdated":1652768268000}',t={},o=a(`

Configuration

Overview

Without any configuration, the page is pretty minimal, and the user has no way to navigate around the site. To customize your site, let\u2019s first create a .vitepress directory inside your docs directory. This is where all VitePress-specific files will be placed. Your project structure is probably like this:

.
\u251C\u2500 docs
\u2502  \u251C\u2500 .vitepress
\u2502  \u2502  \u2514\u2500 config.js
\u2502  \u2514\u2500 index.md
\u2514\u2500 package.json

The essential file for configuring a VitePress site is .vitepress/config.js, which should export a JavaScript object:

export default {
  title: 'Hello VitePress',
  description: 'Just playing around.'
}

Check out the Config Reference for a full list of options.

Config Intellisense

Since VitePress ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config

Alternatively, you can use the defineConfig helper at which should provide intellisense without the need for jsdoc annotations:

import { defineConfig } from 'vitepress'

export default defineConfig({
  // ...
})

VitePress also directly supports TS config files. You can use .vitepress/config.ts with the defineConfig helper as well.

Typed Theme Config

By default, defineConfig helper leverages the theme config type from default theme:

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    // Type is \`DefaultTheme.Config\`
  }
})

If you use a custom theme and want type checks for the theme config, you'll need to use defineConfigWithTheme instead, and pass the config type for your custom theme via a generic argument:

import { defineConfigWithTheme } from 'vitepress'
import { ThemeConfig } from 'your-theme'

export default defineConfigWithTheme<ThemeConfig>({
  themeConfig: {
    // Type is \`ThemeConfig\`
  }
})
`,18),p=[o];function i(c,r,l,d,u,f){return e(),s("div",null,p)}var g=n(t,[["render",i]]);export{h as __pageData,g as default};