DOCSEARCHbyAlgolia
Submit Docs

VuePress Documentation

website·Indexed 19 days ago

https://vuepress.vuejs.org/

VuePress is a markdown-centered static site generator (SSG) used for building documentation and blogs. It supports Webpack and Vite bundlers, provides a flexible Plugin and Theme API, and allows for the integration of Vue SFCs within Markdown files. The documentation covers getting started, configuration, i18n, deployment, and advanced guides for writing plugins and themes.

Tokens
38.9K
Snippets
232
Records
320
Agent score
96%

What's inside VuePress

  1. 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.

  2. Overview of VuePress core features

    VuePress is a static site generator designed for simplicity and performance. Key characteristics include:

    • Markdown-Centered: Uses a minimal setup focused on markdown files to streamline content creation.
    • Vue-Powered: Allows the use of Vue components directly within markdown files and the development of custom themes using Vue.
    • Performance: Generates pre-rendered static HTML for each page for fast initial load, then behaves as a Single Page Application (SPA) once loaded.
    • Extensibility: Supports a flexible plugin API for adding features and provides a default theme, with options for community themes or custom builds.
    • Bundler Support: Supports both Vite (recommended) and Webpack.

  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. It allows users to write content in Markdown, which is then used to generate a static site for hosting.

  4. Display system and dependency information with vuepress info

    The vuepress info command outputs detailed information about your current system and dependencies. This is primarily used for environment verification or when reporting issues.
    vuepress info

  5. Process markdown content as Vue templates

    VuePress transforms the main markdown content of a page into HTML code, which is then treated as the <template> of a Vue Single File Component (SFC). This allows developers to use both standard Markdown (via markdown-it) and Vue template syntax within the same page.

  6. Understand the VuePress Node App and Client App architecture

    VuePress is split into two primary environments. When developing plugins and themes, it is critical to distinguish between them:

    1. Node App: Responsible for generating temporary files, including pages and routes. The entry file of a plugin or theme is loaded here.
    2. Client App: A standard Vue app handled by a bundler. This environment loads client-side files such as components and client configuration files.

  7. Diagnose environment with `vuepress info`

    The vuepress info command outputs detailed information about your system and dependencies. This is primarily used for environment verification or when reporting issues.
    vuepress info

  8. Use VuePress Markdown syntax extensions

    VuePress uses markdown-it to parse content and includes several built-in extensions. These can be further configured via the markdown and extendsMarkdown options in the VuePress configuration.

  9. Understand 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: Responsible for generating temporary files, including pages and routes. The entry file of a plugin or theme is loaded here.
    2. Client App: Handled by the bundler. This environment loads client-side files such as components and client configuration files.

  11. Use Vue template syntax and components in Markdown

    Because VuePress allows HTML in Markdown and Vue template syntax is compatible with HTML, you can use Vue interpolation and components directly within your Markdown files.
    <!-- Vue Template Syntax -->
One plus one equals: {{ 1 + 1 }}

<span v-for="i in 3"> span: {{ i }} </span>

<!-- Vue Components -->
This is a built-in component: <Badge text="demo" />

  12. Handle base URLs for public assets with withBase

    When a site is deployed to a non-root URL (e.g., https://foo.github.io/bar/), the base config must be set (e.g., '/bar/'). While VuePress automatically handles the base for standard Markdown image references, dynamic links in custom themes require the withBase helper to ensure the correct path is generated.

    Note: If using the webpack bundler, set markdown.assets.absolutePathPrependBase to true to automatically prepend the base to markdown images.

    <script setup>
import { ref } from 'vue'
import { withBase } from 'vuepress/client'

const logoPath = ref('/images/hero.png')
</script>

<template>
  <img :src="withBase(logoPath)" />
</template>
    <!-- Using the global helper in Markdown -->
<img :src="$withBase('/images/hero.png')" alt="VuePress Logo">