Vue.js

# Documentation Style Guide

This guide will provide an overview of different design elements that are available for your use in creating documentation.

# Alerts

VuePress provides a custom container plugin to create alert boxes. There are four types:

  • Info: Provide information that is neutral
  • Tip: Provide information that is positive and encouraged
  • Warning: Provide information that users should be aware of as there is a low to moderate
  • Danger: Provide information that is negative and has a high risk to the user

Markdown Examples

::: info
You can find more information at this site.
:::

::: tip
This is a great tip to remember!
:::

::: warning
This is something to be cautious of.
:::

::: danger DANGER
This is something we do not recommend. Use at your own risk.
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Rendered Markdown

INFO

You can find more information at this site.

TIP

This is a great tip to remember!

WARNING

This is something to be cautious of.

DANGER

This is something we do not recommend. Use at your own risk.

# Code Blocks

VuePress uses Prism to provide language syntax highlighting by appending the language to the beginning backticks of a code block:

Markdown Example

```js
export default {
  name: 'MyComponent'
}
```
1
2
3
4
5

Rendered Output

export default {
  name: 'MyComponent'
}
1
2
3

# Line Highlighting

To add line highlighting to your code blocks, you need to append the line number in curly braces.

# Single Line

Markdown Example

```js{2}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
```
1
2
3
4
5
6
7
8
9

Rendered Markdown


 






export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
1
2
3
4
5
6
7

# Group of Lines

```js{4-5}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
```
1
2
3
4
5
6
7
8
9



 
 



export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
1
2
3
4
5
6
7

# Multiple Sections

```js{2,4-5}
export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
```
1
2
3
4
5
6
7
8
9

 

 
 



export default {
  name: 'MyComponent',
  props: {
    type: String,
    item: Object
  }
}
1
2
3
4
5
6
7

← Translations →