Using Vue Components in Markdown Files

Even though VuePress is primarily built for documentation (at the moment), you can still create static generated websites and use single file components in your markdown files! Let’s get started by creating another project directory inside of your working directory. You are going to create a very simple website with a home page and an internal page. With this project, you will learn how to use single file Vue Components in markdown files, asset handling, routing and more.

mkdir vuepress-site
cd vuepress-site

# Open in VS Code
code .

# Or Open in Atom
atom .

Let’s create a README.md file inside of the root directory. Remember, all README.md files will be converted into index.html pages so this README.md file will be your homepage. When created, open it up add some content. For now, just add the text # Homepage so we can see some content. After VuePress builds the project, you should see a page with the text “Homepage”...