VuePress ๐งโโ๏ธ
โจ
![](https://vuepress.vuejs.org/hero.png)
โจ
โจ
Hello ๐
Ramona Bรฎscoveanu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/6110810/13640803_1450364891656502_5263193923741763235_o.jpg)
๐ฉ๐ผโ๐ป Senior Developer @ SAP
ย @CodesOfRa
ย
๐ง ๐ท๐ฑ
![](https://media0.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)
VuePress
- What it is?
- Why use it?
- How does it work?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/6110745/logo.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7688440/pasted-from-clipboard.png)
Github-style tables
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7688443/pasted-from-clipboard.png)
Emojis๐ฅณ
Syntax Highlighting in Code Blocks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7688446/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7689756/pasted-from-clipboard.png)
Demo time ๐ฏโโ๏ธ
![](https://media0.giphy.com/media/R6xi8dXsRhIjK/giphy.gif)
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?
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
![](https://v1.vuepress.vuejs.org/architecture.png)
You can also write your own pluginย
![](https://media3.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)
VuePress is magic โจ
Markdown slot
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7706823/pasted-from-clipboard.png)
::: 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! ย
![](https://media2.giphy.com/media/xsE65jaPsUKUo/giphy.gif)
VuePress
By Ramona Biscoveanu
VuePress
VueDay 2020
- 723