# Home page

This is the home page of your vuepress site. Go nuts with markdown.

'example'.slice();

# Vuepress notes

# Installation

• Global install for standalone project (e.g. solid book)
• Alternative is local install inside existing project (e.g. docs for a web project)
• 1305 packages. Holy shnikes!

# Dev

• vuepress dev serves at http://localhost:8080/
• Hot reload with updates
• Add more dirs and READMEs, e.g. /tv/README.md
• View at /tv/ (trailing slash required)

# Config

• Add .vuepress/config.js
• Config title appears in header
• Config description is meta
• Webpage title is vuepress page title joined with config title

# Deploy

• vuepress build builds to .vuepress/dist by default
• Simply serve as static site, e.g. on github pages, https://lukechinworth.github.io/vuepress-test/built-site/

# Links

• Link is the TV page will be updated with url base automatically
• Links do not refresh. Front end is single page app.
• vuepress dev will serve from base url config http://localhost:8080/vuepress-test/built-site/

# Vue

• Md is compiled to html and then passed to vue-loader, so this works: 7
• You can access site metadata with the global $page: { "key": "v-67044b02b05e6", "path": "/", "title": "Home page", "headers": [ { "level": 2, "title": "Vuepress notes", "slug": "vuepress-notes" }, { "level": 3, "title": "Installation", "slug": "installation" }, { "level": 3, "title": "Dev", "slug": "dev" }, { "level": 3, "title": "Config", "slug": "config" }, { "level": 3, "title": "Deploy", "slug": "deploy" }, { "level": 3, "title": "Links", "slug": "links" }, { "level": 3, "title": "Vue", "slug": "vue" }, { "level": 3, "title": "Frontmatter", "slug": "frontmatter" }, { "level": 3, "title": "Vue script and style", "slug": "vue-script-and-style" }, { "level": 3, "title": "Vue components", "slug": "vue-components" }, { "level": 2, "title": "Vuepress default theme notes", "slug": "vuepress-default-theme-notes" }, { "level": 3, "title": "Navbar", "slug": "navbar" }, { "level": 3, "title": "Sidebar", "slug": "sidebar" }, { "level": 3, "title": "Prev/Next links", "slug": "prev-next-links" }, { "level": 3, "title": "Wrap up", "slug": "wrap-up" } ], "frontmatter": { "custom": "Title", "list": [ "one", "two", "three" ], "sidebarDepth": 2 } }

# Frontmatter

• Frontmatter for the current page is available on the $page object: { "custom": "Title", "list": [ "one", "two", "three" ], "sidebarDepth": 2 }
• Set front matter with yaml at top of this markdown file

# Vue script and style

• Each markdown file is essentially a vue component, so you can do script and style per page
• So this can be styled with css: blue text
• Check out the console for js from this page

# Vue components

• Add components to .vuepress/components. These are registered as global, async components, like this block quote:

This is the quotation.

Author

# Vuepress default theme notes

# Navbar

• Nav bar links are specified in .vuepress/config.js at themeConfig.nav.
• Make a dropdown by nesting items

# Sidebar

• Specify pages to show in sidebar themeConfig.sidebar to config.
• Displays h2 by default; specify sidebarDepth in frontmatter per page to display h3

# Prev/Next links

• Automatically inferred from link order in sidebar config.

# Wrap up

• Most configs can be configured in the frontmatter per page
• Check out the default theme config and config reference in the vuepress docs