VuePress ๐Ÿง™โ€โ™€๏ธ

โœจ

โœจ

โœจ

Hello ๐Ÿ‘‹

Ramona Bรฎscoveanu

๐Ÿ‘ฉ๐Ÿผโ€๐Ÿ’ป Senior Developer @ SAP

ย @CodesOfRa

ย 

๐Ÿง€ ๐Ÿท๐ŸŒฑ

VuePress

  • What it is?
  • Why use it?
  • How does it work?

a minimalistic static site generatorย with a Vue-powered theming systemย and Plugin API, and a default themeย optimized for writing technical documentation.

Why use it?

ย ๐Ÿ’๐Ÿผโ€โ™€๏ธ

  • SEO

  • Performance

  • Security

  • Greener

What makes VuePress magic โœจ?

Default theme specially built for writing technical documentation

Markdown extensions

Frontmatter

Github-style tables

Emojis๐Ÿฅณ

Syntax Highlighting in Code Blocks

Vue in markdown ๐Ÿ˜ฒ

VuePress uses markdown-itย as the Markdown renderer.

module.exports = {
  markdown: {
    // options for markdown-it-anchor
    anchor: { permalink: false },
    // options for markdown-it-toc
    toc: { includeLevel: [1, 2] },
    extendMarkdown: md => {
      // use more markdown-it plugins!
      md.use(require('markdown-it-xxx'))
    }
  }
}

Did you hear that it's also easy to use ?

How to start?

yarn create vuepress-site [optionalDirectoryName]
yarn add -D vuepress

or

Demo time ๐Ÿ‘ฏโ€โ™€๏ธ

Project structure

โ”œโ”€โ”€ docs
โ”‚   โ”œโ”€โ”€ README.md
โ”‚   โ”œโ”€โ”€ guide
โ”‚   โ”‚   โ”œโ”€โ”€ README.md
โ”‚   โ”‚   โ””โ”€โ”€ getting-started.md
โ”‚   โ””โ”€โ”€ .vuepress
โ”‚       โ”œโ”€โ”€ config.js
โ”‚       โ”œโ”€โ”€ components
โ”‚       โ”‚   โ””โ”€โ”€ MyVueComponent.vue
โ”‚       โ””โ”€โ”€ styles
โ”‚           โ”œโ”€โ”€ palette.styl
โ”‚           โ””โ”€โ”€ index.styl
โ””โ”€โ”€ package.json

How does it work?

A VuePress site is,

in fact, a SPA powered by

Vueย +ย Vue Routerย + webpack.

Theming

System

Plugin

System

Layout

System

Default

theme

External

themes

Internal

Plugins

External

Plugins

Static Site Generator

But what if you don't like the default theme?

Find a theme you like

ย 

// .vuepress/config.js
module.exports = {
  theme: 'vuepress-theme-awesome-theme' 
  
};

Create your own theme

theme
โ”œโ”€โ”€ global-components
โ”‚   โ””โ”€โ”€ xxx.vue
โ”œโ”€โ”€ components
โ”‚   โ””โ”€โ”€ xxx.vue
โ”œโ”€โ”€ layouts
โ”‚   โ”œโ”€โ”€ Layout.vue (Mandatory)
โ”‚   โ””โ”€โ”€ 404.vue
โ”œโ”€โ”€ styles
โ”‚   โ”œโ”€โ”€ index.styl
โ”‚   โ””โ”€โ”€ palette.styl
โ”œโ”€โ”€ templates
โ”‚   โ”œโ”€โ”€ dev.html
โ”‚   โ””โ”€โ”€ ssr.html
โ”œโ”€โ”€ index.js
โ”œโ”€โ”€ enhanceApp.js
โ””โ”€โ”€ package.json

Theme inheritanceย 

module.exports = {
  extend: '@vuepress/theme-default'
}

Overrides

//.vuepress/styles/palette.styl
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
//.vuepress/styles/index.styl
.content {
  font-size 30px
}

Ejecting

//run
./node_modules/.bin/vuepress eject

Plugins

Plugins

  • active-header-links
  • back-to-top
  • blog
  • google-analytics
  • last-updated
  • medium-zoom
  • pagination
  • pwa
  • register-components
  • search

You can also write your own pluginย 

VuePress is magic โœจ

Markdown slot

::: slot header

# Here might be a page title

:::

- A Paragraph
- Another Paragraph

::: slot footer
Here's some contact info
:::
<template>
  <div class="container">
    <header>
      <Content slot-key="header"/>
    </header>
    <main>
      <Content/>
    </main>
    <footer>
      <Content slot-key="footer"/>
    </footer>
  </div>
</template>

Want to know more?

Thank you! ย 

VuePress

By Ramona Biscoveanu

VuePress

VueDay 2020

  • 745