# Components

In order to better enjoy the convenience of this plugin, the plugin provides some out-of-the-box components.

# <SimplePagination>

<template>
  <SimplePagination />
</template>

<script>
import { SimplePagination } from '@vuepress/plugin-blog/lib/client/components'
export default {
  components: {
    SimplePagination
  }
}
</script>
  • Output:

TIP

You can use $accentColor in palette.styl to adjust the default colors of this component.

# <Pagination>

<template>
  <Pagination />
</template>

<script>
import { Pagination } from '@vuepress/plugin-blog/lib/client/components'
export default {
  components: {
    Pagination
  }
}
</script>
  • Output:

TIP

You can use $accentColor in palette.styl to adjust the default colors of this component.

# <Comment>

This component will automatically render the layout of comment service you pick. And if comment is not enabled, it'll render nothing.

<template>
  <Comment />
</template>

<script>
import { Comment } from '@vuepress/plugin-blog/lib/client/components'
export default {
  components: {
    Comment
  }
}
</script>
  • Output:
    • Disqus:

    • Vssue:

# <SimpleNewsletter>

Implemented by vuepress-plugin-mailchimp

<template>
  <SimpleNewsletter/>
</template>
  • Output: