DOCSEARCHbyAlgolia
Submit Docs

VuePress Documentation

website·Indexed 29 days ago

https://vuepress.github.io/

VuePress is a markdown-centered static site generator (SSG) used to build documentation and blogs. It features a plugin and theme system, supports Vite and Webpack bundlers, and provides a comprehensive set of APIs including Node API, Client API, and Plugin API. The documentation covers site configuration, deployment, migration from v1 to v2, and advanced cookbooks for extending themes and handling Vue SFCs.

Tokens
58K
Snippets
340
Records
493
Agent score
68%

What's inside VuePress

  1. Overview of VuePress

    VuePress is a markdown-centered static site generator (SSG) designed for creating documentation, blogs, and other static sites. It allows users to write content in Markdown and generates a static site for hosting. Unlike some SSGs, VuePress allows the use of Vue components directly inside Markdown files to embed dynamic content.

  2. Overview of VuePress static site generator

    VuePress is a markdown-centered static site generator (SSG) designed for building documentation, blogs, and other static sites. It allows users to write content in Markdown, which is then used to generate a static site for hosting.

  3. Overview of VuePress Static Site Generator

    VuePress is a markdown-centered static site generator (SSG) designed for building documentation, blogs, and other static sites. Users write content in Markdown, which VuePress then converts into a static site for hosting.

  4. Overview of VuePress core features

    VuePress is a static site generator that focuses on simplicity and performance. Key characteristics include:

    • Markdown-Centered: Uses a minimal setup with a markdown-focused project structure.
    • Vue-Powered: Supports the use of Vue components directly within markdown files and allows for custom theme development using Vue.
    • Performance: Generates pre-rendered static HTML for each page, which then hydrates into a Single Page Application (SPA) upon loading.
    • Extensibility: Provides a default theme, supports community themes, and offers a flexible plugin API for adding plug-and-play features.

  5. Migrate VuePress v1 project to v2 (General Overview)

    VuePress v2 introduces several major architectural changes: it now uses Vue 3, is developed with TypeScript, supports both Webpack and Vite as bundlers, and is released as pure ESM packages. Plugins and themes from v1 are not compatible with v2 and must be updated to their v2 versions. CommonJS config files are no longer supported; you must use ESM format.

  6. Understand the VuePress Node App vs Client App architecture

    VuePress is split into two main execution environments. This distinction is critical when developing plugins and themes:

    1. Node App: This is the server-side environment. The entry files of plugins and themes are loaded here. The Node App is responsible for generating temporary files, such as pages and routes.
    2. Client App: This is the browser-side environment. Client files (such as Vue components and client configuration files) are loaded here and are processed by the bundler, similar to a standard Vue application.

  7. VuePress CLI Overview

    The VuePress CLI provides commands to manage the development lifecycle of a VuePress site. General options include -v, --version to display the version number and -h, --help to display help messages. To enable debug logs for the underlying debug module, set the environment variable DEBUG=vuepress*.
    vuepress --help

  8. Diagnose environment with `vuepress info`

    The info command outputs detailed information about your current system and dependencies. This is primarily used for checking your environment or providing diagnostic data when reporting an issue.
    vuepress info

  9. Display VuePress environment information

    Use the vuepress info command to output details about your system and dependencies. This is primarily used for environment verification or when reporting issues.
    vuepress info

  10. Resolve detailed route information for a link

    Use the resolveRoute function from vuepress/client to get detailed information about a route, including its metadata and loader. It accepts a link and an optional base path.

    The returned object includes a notFound boolean: if true, the route does not exist, and the returned path, meta, and loader will refer to the default 404 page.

    import { resolveRoute } from 'vuepress/client'

// Resolve an existing route
const route = resolveRoute('/foo/') 
// => { notFound: false, path: '/foo/', meta: { title: 'Foo' }, loader: FooPageLoader }

// Resolve relative to a base path
const routeRelative = resolveRoute('baz.html', '/foo/bar.html') 
// => { notFound: false, path: '/foo/baz.html', meta: { title: 'Baz' }, loader: BazPageLoader }

// Resolve a non-existent route
const routeMissing = resolveRoute('/not-exist.html') 
// => { notFound: true, path: '/not-exist.html', meta: { title: 'Not Found' }, loader: NotFoundPageLoader }

  11. Use Markdown syntax extensions in VuePress

    VuePress uses markdown-it to parse content. It includes built-in support for GFM Tables and Strikethrough. Developers can further customize Markdown parsing by using the markdown and extendsMarkdown configuration options to load additional markdown-it plugins.

  12. Diagnose environment and dependencies with vuepress info

    The vuepress info command outputs detailed information about your system and dependencies. This is primarily used for checking your environment or providing diagnostic data when reporting an issue.
    vuepress info