vuejs / vitepress

Vite & Vue powered static site generator.

VitePress 📝💨

---

VitePress is a Vue-powered static site generator and a spiritual successor to VuePress, built on top of Vite.

Documentation

To check out docs, visit vitepress.dev.

Changelog

Detailed changes for each release are documented in the CHANGELOG.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT

Copyright (c) 2019-present, Yuxi (Evan) You

vitepress's Issues

Prev / Next links

Ref: https://vuepress.vuejs.org/theme/default-theme-config.html#prev-next-links

This one may be tricky since VitePress doesn't include the whole site's page metadata (for bundle size considerations). We may need to extract this information at build time and include it directly in each individual page's metadata ($page)

Git repository and Edit Links

Ref: https://vuepress.vuejs.org/theme/default-theme-config.html#git-repository-and-edit-links

contributing error with cjs export

Describe the bug
Spin up vitepress locally to develop

To Reproduce
Steps to reproduce the behavior:
Follow contributing instructions

1. Clone vitepress
2. yarn && yarn link
3. yarn dev

go to new directory and try and link vitepress:

▶ yarn link vitepress
yarn link v1.22.4
warning package.json: No license field
success Using linked package for "vitepress".
✨  Done in 0.06s.

source/repos/kpress  master ✗                                                            6h15m ✖ ⚑ ◒
▶ yarn dev
yarn run v1.22.4
warning package.json: No license field
$ vitepress dev docs
vitepress v0.5.0
vite v1.0.0-rc.3
/Users/darrenjennings/source/repos/vitepress/dist/shared/config.js:23
export function resolveSiteDataByRoute(siteData, route) {
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:760:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (/Users/darrenjennings/source/repos/vitepress/dist/node/config.js:11:16)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior
Should not throw error.

System Info

• vitepress version: v0.5.0
• vite version: v1.0.0-rc.3
• Node version: 12.13.0
• OS version: Mac OS 10.15.3

Additional context

Error when trying to use it with Feathers Client can't find \index

on npm run dev
Error: EISDIR: illegal operation on a directory, read

Error: ENOENT: no such file or directory, stat 'T:\GitHub\TODO-APP\todo-vue\node_modules\socket.io-client\lib\index'

the file existis 'T:\GitHub\TODO-APP\todo-vue\node_modules\socket.io-client\lib\index.js
'
it doesn't recognize the file without the extensions...

Search box

Ref: https://vuepress.vuejs.org/theme/default-theme-config.html#search-box

Any idea on how to import css libraries?

Can't figure out how to include trailwindcss for example, looks like plugins are not supported in a VuePress way. Thanks for any tips

Multi Sidebar

Ref: https://vuepress.vuejs.org/theme/default-theme-config.html#multiple-sidebars

Code in question: https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/components/SideBar.ts#L117

Code block line highlighting not highlighting correct line

Describe the bug
When creating a code block using line highlighting, it does not highlight the correct line. Instead it seems to highlight the line between the desired line and the previous line.

To Reproduce
Steps to reproduce the behavior:

Create a new vitepress project. In any markdown page create a codeblock and specify the line to highlight. Check the output and the correct line will not be highlighted.

Example:

## Usage
```html{3}
<template>
    <div>
        <kro-button @click="delete">Delete Cake</kro-button>
    </div>
</template>

<script setup>
    import { useDialog } from '@black-kro/ui';

    const { createDialog } = useDialog();

    export const delete = () => {
        createDialog({
            title: 'Delete Cake?',
            message: 'Are you sure you would like to delete the cake?',
        })
            .then(() => {
                // Delete Cake.
            })
            .catch(() => {
                // Don't delete Cake.
            })
    }
</script>

Output:

Expected behavior
Line 3 should be highlighted.

System Info

• vitepress version: 0.5.0
• vite version: 1.0.0-rc.3
• Node version: 14.7.0
• OS version: Windows 10

Build fails due to custom directive missing an SSR Transform

Describe the bug

Adding a simple directive inside a markdown file or an SFC throws an error during the build. Seems like ClientOnly component does not exist yet in VitePress.

Custom directive is missing corresponding SSR transform and will be ignored.

To Reproduce

<div v-test>test</div>


<script>
export default {
  directives: {
    test: {
      mounted(el, binding) {
        console.log(el)
      }
    }
  }
}
</script>

Expected behavior
Build should work even though an SSR implementation for the custom directive doesn't exist.

System Info

• vitepress version: 0.6.0
• vite version: v1.0.0-rc.4
• Node version: 12.18.3
• OS version: Catalina 10.15.6

Additional context
None.

build done, but process still alive

Describe the bug
My personal simple project uses vitepress build in CI environment.
The build process should exit after build done, but my build-job seems never finish.

To Reproduce
Execute vitepress build

Expected behavior
The process should exit after built successfully.

System Info

• vitepress version: v0.5.0
• vite version: v1.0.0-rc.4
• Node version: v12.16.2
• OS version: Windows 10

Additional context
If I modify "node_modules\vitepress\dist\node\build\build.js", it works:

async function build(buildOptions = {}) {
    // ...
    console.log('done.');
    // Make the build process exit.
    process.exit(0);
}
exports.build = build;

Multiline vue-components transform error

Describe the bug

index.md with

<foo-bar>
xxx
</foo-bar>

will throw error

[vite] SFC template compilation error: 
docs/index.md:4:1
Element is missing end tag.
1  |  
2  |  <template><div><h1 id="test"><a class="header-anchor" href="#test" aria-hidden="true">#</a> test</h1>
3  |  <foo-bar>
   |            ^
4  |  <p>xxx
5  |  </foo-bar></p>

docs/index.md:5:11
Invalid end tag.
3  |  <foo-bar>
4  |  <p>xxx
5  |  </foo-bar></p>
   |            ^
6  |  </div></template>

To Reproduce
Steps to reproduce the behavior:

clone my repo

run npm i && npm run docs

Expected behavior
A clear and concise description of what you expected to happen.

no error or warning and transform will be correct

System Info

• vitepress version:0.6.0
• vite version:1.0.0-rc.3
• Node version:v12.16
• OS version:10.15

config>base 路径打包导致错误

config.js

module.exports = {
  base: '/docs/', //根目录
  lang: 'zh-CN',
}

开发环境测试正常

打包输出，二级目录下访问路径错误
返回路径
http://localhost/docs/_assets/lib_init.md.undefined.js

`vitepress build` hangs after a successful build

Describe the bug
With a single markdown file (like the example in the README), vitepress successfully builds but the process never exits.

To Reproduce
Steps to reproduce the behavior:

$ mkdir repro
$ cd repro
$ echo '# Hello VitePress' > index.md
$ npx vitepress build
vitepress v0.5.0
vite v1.0.0-rc.4
building client bundle...
building server bundle...
rendering pages...
done.

# (it hangs here)

Expected behavior
The process should exit with status code zero.

System Info

• vitepress version: v0.5.0
• vite version: v1.0.0-rc.4
• Node version: v12.18.3
• OS version: macOS 10.15.6 (but this also repros in a netlify deploy)

Additional context

I used why-is-node-running to detect open handles, and it appears that vite/vitepress leaves a bunch of esbuild processes running.

Full output from why-is-node-running

$ ./node_modules/.bin/why-is-node-running ./node_modules/.bin/vitepress build
probing program /Users/mmulder/repro/node_modules/.bin/vitepress
kill -SIGUSR1 11013 for logging
vitepress v0.5.0
vite v1.0.0-rc.4
building client bundle...
building server bundle...
rendering pages...
done.
load: 3.57  cmd: esbuild 11024 running 0.00u 0.00s
There are 14 handle(s) keeping the process running

# TTYWRAP
/Users/mmulder/repro/node_modules/siginfo/index.js:3               - if (process.stderr.isTTY || force === true) {
/Users/mmulder/repro/node_modules/why-is-node-running/include.js:3 - require('siginfo')(why, true)

# SIGNALWRAP
/Users/mmulder/repro/node_modules/siginfo/index.js:3               - if (process.stderr.isTTY || force === true) {
/Users/mmulder/repro/node_modules/why-is-node-running/include.js:3 - require('siginfo')(why, true)

# SIGNALWRAP
/Users/mmulder/repro/node_modules/siginfo/index.js:5               - process.on('SIGINFO', onsiginfo)
/Users/mmulder/repro/node_modules/why-is-node-running/include.js:3 - require('siginfo')(why, true)

# SIGNALWRAP
/Users/mmulder/repro/node_modules/siginfo/index.js:6               - process.on('SIGUSR1', onsiginfo)
/Users/mmulder/repro/node_modules/why-is-node-running/include.js:3 - require('siginfo')(why, true)

# TTYWRAP
/Users/mmulder/repro/node_modules/chalk/node_modules/supports-color/index.js:129 - stdout: getSupportLevel(process.stdout),

# PROCESSWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543                       - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39           - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49           - const service = await ensureService();
/Users/mmulder/repro/node_modules/vite/dist/node/build/buildPluginEsbuild.js:38 - return esbuildService_1.transform(code, chunk.fileName, {
/Users/mmulder/repro/node_modules/rollup/dist/shared/rollup.js:18616            - return hook.apply(context, args);

# PIPEWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543             - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39 - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49 - const service = await ensureService();

# PIPEWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543             - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39 - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49 - const service = await ensureService();

# PROCESSWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543                       - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39           - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49           - const service = await ensureService();
/Users/mmulder/repro/node_modules/vite/dist/node/build/buildPluginEsbuild.js:38 - return esbuildService_1.transform(code, chunk.fileName, {
/Users/mmulder/repro/node_modules/rollup/dist/shared/rollup.js:18616            - return hook.apply(context, args);

# PIPEWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543             - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39 - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49 - const service = await ensureService();

# PIPEWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543             - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39 - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49 - const service = await ensureService();

# PROCESSWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543                       - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39           - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49           - const service = await ensureService();
/Users/mmulder/repro/node_modules/vite/dist/node/build/buildPluginEsbuild.js:38 - return esbuildService_1.transform(code, chunk.fileName, {
/Users/mmulder/repro/node_modules/rollup/dist/shared/rollup.js:18616            - return hook.apply(context, args);

# PIPEWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543             - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39 - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49 - const service = await ensureService();

# PIPEWRAP
/Users/mmulder/repro/node_modules/esbuild/lib/main.js:543             - let child = child_process.spawn(command, args.concat("--service"), {
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:39 - _service = await esbuild_1.startService();
/Users/mmulder/repro/node_modules/vite/dist/node/esbuildService.js:49 - const service = await ensureService();

0.3.0build error

├──.vitepress
│ ├──dist
│ │ ├──_assets
│ │ │ ├──app.b8eb737b.js
│ │ │ ├──common-40001381.js
│ │ │ ├──index.md.9d20daf2.js
│ │ │ ├──index.md.9d20daf2.lean.js
│ │ │ └──style.34674f41.css
│ ├──theme
│ │ ├──index.js
│ │ └──Layout.vue
├──index.md
├──package-lock.json
└──package.json

Write according to the document when executing npx vitepress build

build error:
ReferenceError: DEV is not defined
at createApp (C:\Users\lizhongyao\Desktop\vitepress\node_modules\vitepress\dist\client\app\temp\app.js:433:17)
at Object.renderPage (C:\Users\lizhongyao\Desktop\vitepress\node_modules\vitepress\dist\node\build\render.js:12:29)
at Object.build (C:\Users\lizhongyao\Desktop\vitepress\node_modules\vitepress\dist\node\build\build.js:24:28)

Just created vuepress-next prototype before noticed this project

As a member of current vuepress team, I just created a prototype for vuepress next major version: https://github.com/vuepress/vuepress-next

• Vue 3 ecosystem
• Typescript
• Drop class API, use compositional functions
• Try do decouple with webpack, may support different bundlers (e.g. vite)

Today I noticed vitepress and don't know where to go next 😢

@yyx990803 Could you please give some advice?

Multi locale support

Ref: https://vuepress.vuejs.org/guide/i18n.html#site-level-i18n-config

Is vitepress auto register components in `.vitepress/components`?

Describe the bug
When I use the components directly in markdown file, It raised a waring with vue.js:1099 [Vue warn]: Failed to resolve componen as:

Does vitepress auto register components in .vitepress/components? or where can I put the .vue files and how to use them? thank you.

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

System Info

• vitepress version:
• vite version:
• Node version:
• OS version:

Additional context
Add any other context about the problem here.

Metadata for collections of pages (blogs etc.)

Is your feature request related to a problem? Please describe.

I would like to be able to display a collection of pages (e.g. my latest blog posts or an alphabetized list of API docs).
VuePress has $site.pages, but VitePress does not ship metadata about all pages, which is great except when I need that data for certain pages.

Describe the solution you'd like

I would like to specify collections of pages that I need metadata for in config.js, for example:

module.exports = {
  title: "My Tech Blog",
  collections: [
    {
      name: 'blog',
      directory: '_posts/',
      layout: 'BlogPostLayout',
    },
    {
      name: 'api',
      directory: 'guide/api/',
      layout: 'TechDocLayout',
    }
  ],
};

This would produce an array of metadata for pages inside the _posts directory could then be accessed via $site.collections.blog

I've also included a layout option that could be used to define a default layout for pages in that collection. That's a separate idea, but the point is that collections could have additional benefits.

You could possibly specify which metadata you need - e.g. you may or may not need the frontmatter for every page in the collection.

I've borrowed the term "collections" from NetlifyCMS, which I use with VuePress currently.

Describe alternatives you've considered

Alternatively, you could simply have a config option to ship metadata for all pages, but that would be all or nothing.

Additional context

Here's an example of how I've implemented collections in a VuePress theme: themeConfig.js, PostList.vue, GlobalLayout.vue

Move repo to `vitejs/vitepress`

Move repo to vitejs/vitepress.

Needless border are displayed at the end of the page

At the end of every page, there is a border displayed. It should only be displayed when there're prev/next links.

Having a link and second header in index.md breaks `vitepress build`

Describe the bug

Hello, Evan! I'm very excited about this project, was playing around with it, trying to see if our existing vuepress content will work here. Discovered, that having this in index.md breaks static build:

# Vitepress build bug

 test: [VuePress](https://vuepress.vuejs.org/)

## Second header

vitepress build result does not display rendered page and shows hydration error in console:

Removing the link or the second header makes build working again

Also displays warnings while building:

To Reproduce
Steps to reproduce the behavior:

1. Build https://github.com/larionov/vitepress-build-bug

git clone [email protected]:larionov/vitepress-build-bug.git
cd vitepress-build-bug/
npm install
npm run build
npx serve .vitepress/dist

2. Open http://localhost:5000/ in browser.

Expected behavior
I expect to see the contents of index.md on the main page, and no errors in console

System Info

• vitepress version :v0.3.1
• vite version: v0.20.7
• Node version: v12.16.1
• OS version: Linux 5.6.15-arch1-1

Close the sidebar when clicking outside of the sidebar

Is your feature request related to a problem? Please describe.
Currently, when sidebar is open, we can only close it by clicking the hamburger menu. We should also make it closable by clicking outside of the sidebar.

Describe the solution you'd like
We should also make it closable by clicking outside of the sidebar.

Describe alternatives you've considered
None

Additional context
None

build error: TypeError: Cannot read property 'rmdir' of undefined

i get this on npx vitepress build

building client bundle...
build error:
TypeError: Cannot read property 'rmdir' of undefined

Can the author add the function of packaging component library in vite? | 作者大大能否在vite中增加封装组件库的功能？

Is your feature request related to a problem? Please describe.

• At present, a component library is being developed. The component packaging scheme used is the package function of Vue cli. Since webpack is used, the packaged files will be relatively large and have been used by rollup. Therefore, I want to use rollup to package and use Vue cli to write sample documents. However, the package code and examples will be divided into two sets, which is very troublesome. I would like to make two To merge together, that is, to complete these two operations directly in vite.

• 目前，正在开发一个组件库。使用的组件打包方案是Vue cli的打包功能。由于使用了webpack，打包的文件将相对较大，并且已被rollup使用。因此，我希望使用rollup打包并使用Vue cli编写示例文档。但是，软件包的代码和示例会被分成两套，这很麻烦。我想把两个合并在一起，也就是说，直接在vite中完成这两个操作。

Describe the solution you'd like

• I want to complete the package of component library and the writing of component examples in vite.
• 我想在vite中完成组件库的打包和组件实例的编写。

Describe alternatives you've considered

• The combination scheme of rollup + Vue cli has been considered
• 考虑了rollup+Vue-cli的组合方案

Additional context

• None
• 无

Can the server build process wait for async components?

Is there a way of making the server bundle part of the build process waits for defineAsyncComponent to import components?
I want to be able to automate which components from a long list of components to import. Unfortunately if I import them all it increases the build size of the app, even when I don't use them.

Here's my crazy code:

const dynamicComponents = [ ... // names of the few components I want to use // ... ]

export default {
  components: {
    ...Object.assign({}, ...dynamicComponents.map(i => {
      return {[i]: defineAsyncComponent(() =>
         import(`./components/${i}.vue`),
      )}
     })),
  },
  ...
}

The components are not rendered in the built static HTML pages but instead appear as unrendered, empty <SomeComponent></SomeComponent>

Warnings on build:

vitepress v0.6.0
vite v1.0.0-rc.4
building client bundle...
building server bundle...
rendering pages...
[Vue warn]: Component  is missing template or render function.
[Vue warn]: Component  is missing template or render function.
done.

I've tried registering these globally inside enhanceApp but run into the same problem. Thanks in advance!

Release 0.2.0 is missing files

https://unpkg.com/browse/[email protected]/dist/client/app/

Missing dist/client/app/index.html (and probably others)

I'm guessing there were some tsc errors that caused scripts/copy.js not to fire?

Wrong APP_PATH

Following the steps from README.md

~/development/playground/vitepress_test
❯ echo '# Hello VitePress' > index.md

~/development/playground/vitepress_test
❯ npx vitepress
vitepress v0.2.0
vite v0.16.7
listening at http://localhost:3000

  Error: ENOENT: no such file or directory, stat '/Users/ziga/.npm/_npx/21240/lib/node_modules/vitepress/dist/client/app/index.html'
      at Object.statSync (fs.js:1035:3)
      at Object.statSync (/Users/ziga/.npm/_npx/21240/lib/node_modules/vitepress/node_modules/graceful-fs/polyfills.js:308:16)
      at Object.cachedRead (/Users/ziga/.npm/_npx/21240/lib/node_modules/vitepress/node_modules/vite/dist/utils/fsUtils.js:20:45)
      at /Users/ziga/.npm/_npx/21240/lib/node_modules/vitepress/dist/node/server.js:98:30
      at async /Users/ziga/.npm/_npx/21240/lib/node_modules/vitepress/node_modules/vite/dist/server/serverPluginHtml.js:51:9
      at async /Users/ziga/.npm/_npx/21240/lib/node_modules/vitepress/node_modules/vite/dist/server/serverPluginModuleRewrite.js:25:9

causes Error: ENOENT.

I believe it originates from resolver's APP_PATH

Responsive styling

Is it possible to throw API to customize the docs title?

Is your feature request related to a problem? Please describe.
The title of the docs cannot be customized, I have an idea that you can throw APIs about setting the title in config.js or some other ways, e.g. I want to set the title to "xxx - xxx" instead of "xxx | xxx", although I can use document.title to modify, but the default is still "xxx | xxx" when rendering. Moreover, when there is a md file as the home page of the document, the document title will be h1 title as the title of the home page, e.g. document h1 is Installation, and then the title will be set Installation | xxx.

Describe the solution you'd like
Throw an API in config.js file, set the title of the home page and other pages according to the route through template characters.
For example, when the route is /, the title can be set ${ site.title} - ${ site.description} , when the route is /xxx, the title can be set ${ page.title} - ${ site.title} - ${ site.description }. Maybe you can also refer to the following configuration structure:

// .vitepress/config.js
...
docsTitle:{
    // Match route “/”
    "/" : "${ site.title} - ${ site.description}",
    // Match route “/about” , if a specific route is set 
    "/about" : "About me",
    // Match route “/xxx” , “ * ” means Wildcard
    "/*" : "${ page.title} - ${ site.title} - ${ site.description }"
}
...

Describe alternatives you've considered
Currently I am using document.title to change the docs title (on vuepress 1.5.0) .

NavBar dropdown

Ref: https://vuepress.vuejs.org/theme/default-theme-config.html#navbar-links

how to add another page

hopefully some basic docs are in the works. Any clues on how to add more than index.md?
Cheers!

Build throws error `ReferenceError: ssrRender is not defined`

Description

On a Vue 3 beta 12 + VitePress 0.1.1 project, trying to build with vitepress build crashes with the following error

Output

$ vitepress build
vitepress v0.1.1
building client bundle...
building server bundle...
rendering pages...
build error:
 ReferenceError: ssrRender is not defined
    at Object.<anonymous> (/Users/marina/Developer/formvuelatte/node_modules/vitepress/lib/app/temp/_assets/index.js:621:22)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.renderPage (/Users/marina/Developer/formvuelatte/node_modules/vitepress/dist/build/render.js:12:27)
    at Object.build (/Users/marina/Developer/formvuelatte/node_modules/vitepress/dist/build/build.js:13:28)
✨  Done in 3.61s.

The line that seems to be crashing is line 12 in node_modules/vitepress/dist/build/render.js
const { createApp } = require(path_1.default.join(config.tempDir, '_assets/index.js'));

Repo to reproduce

To reproduce you can check out: https://github.com/vuelidate/formvuelatte/tree/next

服务启动之后，进入地址报错

Describe the bug
After running npx vitepress, I open the browser and load the address of http://localhost:3000, but I get a error.

To Reproduce
Steps to reproduce the behavior:
PS D:\桌面\demo> npx vitepress
vitepress v0.5.0
vite v1.0.0-rc.4
listening at http://localhost:3000
[vite] Failed to resolve module import "vue/dist/vue.runtime.esm-bundler.js.0.0-rc.5@vuedist�ue.runtime.esm-bundler.js". (imported by /@app/components/Debug.vue)

Expected behavior
Getting "Hello Vitepress" in browser.

System Info

• vitepress version: v0.5.0
• vite version: v1.0.0-rc.4
• Node version: 12.14.0
• OS version:10.0.19041 暂缺 Build 19041

Additional context
尤大大,I am you big fan.

Failed to build

Describe the bug
On current master, yarn build failed due to typing error.

src/client/app/utils.ts:20:32 - error TS2339: Property 'env' does not exist on type 'ImportMeta'.

20       const base = import.meta.env.BASE_URL
                                  ~~~

Found 8 errors.

To Reproduce

• Clone, yarn and then yarn build

Additional context
Fix PR made: #44

sidebar composable exported for general use

Is your feature request related to a problem? Please describe.
I noticed there are some useActiveSidebarLinks composables in the default theme. They are a bit specific to the Sidebar.vue component. It does not make it easy to customize a new sidebar.

Describe the solution you'd like
Introduce exported composable useActiveSidebarLinks which takes in properties like selectors or refs and returns which link is active.

Describe alternatives you've considered
I am using the default-theme's Sidebar component wholesale in a custom theme for now.

Additional context
I might take a stab at it but wanted to file an issue until then.

ReferenceError: __script is not defined

Describe the bug
When use a script tag without export statement in index.md, an exception has occurred.

ReferenceError: __script is not defined
To Reproduce

index.md

# Hello VuePress!

## title

<script>
console.log('test');
// export default {}
</script>

Expected behavior
No js error.

System Info

• vitepress version: 0.4.1

Sidebar does not re-render based on new content in markdown

Describe the bug
A clear and concise description of what the bug is.

1. Expect

To Reproduce
Steps to reproduce the behavior:

1. Create index.md file with a few headings
2. Sidebar auto is turned on
3. Add new headings (h2s or h3s) to index.md file
4. Save file

Expected behavior
A clear and concise description of what you expected to happen.

Sidebar should rerender with the appropriate headings.

System Info

• vitepress version: v0.4.0
• vite version: v1.0.0-beta.1
• Node version: v12.16.1
• OS version: macOS 10.15.5

Additional context
Add any other context about the problem here.

Sidebar Navbar break on 0.4.0

Describe the bug
The SideBar.js and NavBar.js components still reference __DEV__ and should be replaced with import.meta.env.DEV to work with 0.4.0

To Reproduce
Use the default theme with 0.4.0

Expected behavior
NavBar and SideBar should not throw DEV not defined errors

System Info

• vitepress version: 0.4.0
• vite version: v1.0.0-beta.2
• Node version:
• OS version:

Additional context
Add any other context about the problem here.

Built-in service worker

Ideally we want a service worker that:

• Is small, hand written & efficient (workbox is a bit convoluted)
• Gets a different hash injected on each build
• Auto skips waiting and claims the client before showing the reload notice

Changes in frontmatter not updated using HMR

Describe the bug

Changing the frontmatter of any markdown file is not reflected in the browser until reloading the page.

System Info

• vitepress version: 0.1.1
• Operating System: macOS 10.14.6
• Node version: 12.10.0

Reproduction

https://github.com/meta7x/vitepress-frontmatter-hrm-bug

• start vitepress
• make changes to index.md, in particular to the frontmatter
• expected behaviour: changes appear on saving the file
• observed behaviour: changes appear only on reloading the page

Frontmatter is not accessible in markdown

Describe the bug
A clear and concise description of what the bug is.

1. Add frontmatter to index.md

---
title: My Docs Site
---

# {{ $frontmatter.title }}

This does not render as expected.

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

System Info

• vitepress version: v0.4.0
• vite version: v1.0.0-beta.1
• Node version: v12.16.1
• OS version: macOS 10.15.5

Additional context
Add any other context about the problem here.

Import a file that's not in the root directory

Is your feature request related to a problem? Please describe.

Currently, I have a directory structure like :

project/
├── dist/
├── docs/
│   ├── .vitepress/
│   └── index.md
├── src/
│   └── components/
├── package.json
└── ...

The docs directory contains a vitepress app.

If I'm not mistaken, that's not possible to import a file that's not in the docs directory (a .vue file from src directory for example).

Describe the solution you'd like

I don't know what's the best solution to this problem. But if we can add a custom vite resolver, it should work I guess ?

Moreover, it would also be necessary to expose the vite watcher instance to watch these resolved files.

Since the recent Vite features, we can alias a path to a fs directory, but in Vitepress, we can't override the vite configuration to add our aliases.

does not render some styles that is handy

vuepress special markdown

topic of contents

::: details code

[[toc]]

:::
[[toc]]

emoji

::: details code

:tada: :100:

:::
🎉 💯

containers

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

::: details
This is a details block, which does not work in IE / Edge
:::

::: danger STOP
Danger zone, do not proceed
:::

::: details codes

console.log("Hello, VuePress!")
console.log("Hello, CICD!")

:::

tables

::: details codes

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

:::

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Error on build

Vitepress dev completely works, only when I try to build I get an error;

Result;

vitepress-test / npx vitepress build
npx: installed 400 in 15.494s
vitepress v0.1.1
building client bundle...
build error:
 { [Error: ENOENT: no such file or directory, rmdir '/Users/username/.npm/_npx/83716/lib/node_modules/vitepress/lib/app/temp']
  errno: -2,
  code: 'ENOENT',
  syscall: 'rmdir',
  path:
   '/Users/username/.npm/_npx/83716/lib/node_modules/vitepress/lib/app/temp' }

details;

• Terminal ZSH
• Node v11.15.0
• Mac OS 10.15.4

What I did;

• ✅ Create a new folder
• ✅ npm init -y
• ✅ npm install -D vitepress
• ✅ echo '# Hello VitePress' > index.md
• ✅ npx vitepress
• 😢 npx vitepress build

I've tried;

• Switching node version (8,10 and 11)
• Create a new clean folder (see result above)
• Build in Netlify

Can you provide a method of monitor to routing change

Is your feature request related to a problem? Please describe.
I read the documentation and source code and found that there is no way to monitor routing. I think this is necessary.
In vue2.x,I can achieve this function using the following code：

watch: {
  $route(to,from){
     ....
   }
}

I know, this is related to the characteristics of vue-router.

Describe the solution you'd like
Can you provide a method for routing monitoring? This will be used in many scenarios.

Describe alternatives you've considered
I try to use window.onhashchange, but this does not meet my needs,I want to monitor the changes of the entire router context,similar to vue-router.

Don’t use a hidden directory

Too late for Vuepress, but maybe not too late for VitePress:

Using a hidden directory for .vitepress is very inconvenient. Users must turn on additional settings in file browsers and text editors to see necessary files to edit them. This makes sense for something like git, where it is intended that you mostly interact with a tool and rarely or never directly edit the hidden directory files yourself, but for VitePress, these considerations don’t fit.

It would make more sense if VitePress was just a thin docs site builder, with the idea that few will customize it, but that’s not the current goal, AFAICT.

Please revisit this issue now and if you disagree, fine, but document it so that it’s clear to users why a hidden directory is a good fit for the project goals.

want more flexibility in the customization part

i want use vitepress become a ui component display website. so i import my sfc in enhanceApp. But at meantime i must config my own Layout.vue and notfound.vue component. That is not what i want. i liked defaulte theme (vuepress old player) very mush.

import Layout from '/@theme/Layout.vue';
import Helloworld from "../components/index"

export default {
  Layout,
  // NotFound,
  enhanceApp({ app, router, siteData }) {
    app.use(Helloworld) 
  }
}

i think @theme/index should not config default layout and enhanceApp at same time or in the same file. or at least it must follow Convention over configuration rule.

if follow vuepress default theme file system and Convention over configuration, it will be better

maybe use @theme/layouts/, @theme/components/

and here is a bug, when a create emptyfile theme in .vitepress .it will crash

Configure for multi-page applications

尤大：
请问如何配置一个多页面的、使用不同layout 布局的应用呢？？

e2e tests

• Add playground with pages for different features
  • markdown syntax kitchen sink
  • $site / $page / $theme injections
  • default theme (test config options)
  • build
  • HMR
• Consult test setup for Vite

Add <meta charset="utf-8"> to rendered html.

When I want to deploy my website on CloudBase, I see messy code on it for Chinese. I think it's because CloudBase don't have content-type: text/html; charset: utf-8 on it's response header, and vitepress don't have <meta charset="utf-8"> on it's rendered html head.