VuePress

Docs Made Easy

Ben Hong
@bencodezen

ThisDot - June 2020

Before we get started...

you can find the slides here:

Ben Hong

Ben Hong

Developer Experience (DX) Engineer at Cypress.io

Vue.js Core Team

How to Draw an Owl

Step 1. Draw some circles

 How to Draw an Owl 

 How to Draw an Owl 

Step 1. Draw some circles

2. Draw the rest of the forking owl

Wait... what just happened...

Incorrect documentation is often worse than no documentation.

Bertrand Meyer

"Wisdom of the Ancients"

Credit: xkcd #979

Documentation that is approachable and
up to date is hard to find.

Common Obstacles

Common Obstacles

  • Separate from the codebase
  • Behind a paywall
  • Not enough time
  • Difficult to customize

like a double rainbow, or someone on the internet saying,

"You know what. You've convinced me I'm wrong."

Good documentation is a rare occurrence,

But there is hope for us yet...

Documentation that is approachable and
up to date is hard to find.

Documentation that is approachable and
up to date is hard to find.

VuePress

Docs Made Easy

Easier

Documentation that is approachable and
up to date is hard to find.

Documentation that is approachable and
up to date is hard to find.

Enter

VuePress

VuePress is a static site generator with a Vue-powered theming system that comes with a default theme optimized for technical documentation.

VuePress is a static site generator with a Vue-powered theming system that comes with a default theme optimized for technical documentation.

Features

  1. Homepage
  2. Navbar
  3. Sidebar
  4. Edit links
  5. Last updated
  6. Search

User

Features

  1. Homepage
  2. Navbar
  3. Sidebar
  4. Edit links
  5. Last updated
  6. Search

User

  1. Frontmatter 
  2. Markdown first
  3. Extensions for Markdown
  4. Syntax highlighting
  5. Vue powered theming system

Maintainer

You can use

Vue in Markdown

🤩 🤩 🤩

But the key thing to remember...

VuePress is not just for Vue projects.

What about

VitePress?

🤔 🧐 🤔

How do I get started?

How do I get started?

# yarn
yarn create vuepress [directoryName]

How do I get started?

# yarn
yarn create vuepress [directoryName]
# npm
npx create-vuepress [directoryName]

Have any questions?

hello@bencodezen.io

Thanks!

VuePress: Docs Made Easy (This Dot - June 2020)

By Ben Hong

VuePress: Docs Made Easy (This Dot - June 2020)

When it comes to the success of any software project, one of the key factors often is its documentation (i.e., docs). While each project has its own challenges, there are common themes and features that are often seen in all good documentation sites. In this talk, you'll learn about a new tool that will empower you and your team to leverage best practices from the Vue.js docs that we all know and love: VuePress.

  • 1,365