Notes and Snippets for VuePress

Find common code snippets bellow to use in these .md documents. Check the source of this page for reference.

You can find more info in:

• VitePress Docs
• MarkDown Cheat Sheet

Introduction

VuePress is composed of two parts: a minimalistic static site generator with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue's own sub projects.

Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.

The repo is auto deployed from gitlab!

Using Vue in Markdown

Browser API Access Restrictions

Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.

If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in <ClientOnly> component:

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

More info on the VuePress docs page.

Callouts

INFO

This is an info box.

CUSTOM TITLE KURWA

This is a tip

WARNING

This is a warning

DANGER

This is a dangerous warning

Details

This is a details block, which does not work in IE / Edge

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

Input

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

Output

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Inserting external code blocks

<footer>
	<p>copyright cenas kurwilineo</p>
</footer>

var b = 3;

More

Check out the documentation for the full list of markdown extensions.