Views

Views are child components of Blocks, responsible for the layout and styling of the data received by their parent component. While Blocks represent the demarcation of content, Views determine the user interface of each Block.

Header

If you just want to play around with VuePress, you can install it globally:

Custom Block

If you have an existing project and would like to keep documentation inside the project, you should install VuePress as a local dependency. This setup also allows you to use CI or services like Netlify for automatic deployment on push.

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md

WARNING

It is currently recommended to use Yarn instead of npm when installing VuePress into an existing project that has webpack 3.x as a dependency. Npm fails to generate the correct dependency tree in this case.

Then, add some scripts to package.json:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

You can now start writing with:

yarn docs:dev # OR npm run docs:dev

To generate static assets, run:

yarn docs:build # Or npm run docs:build

By default the built files will be in .vuepress/dist, which can be configured via the dest field in .vuepress/config.js. The built files can be deployed to any static file server. See Deployment Guide for guides on deploying to popular services.