# 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:

# <Newsletter>

<template>
  <Newsletter />
</template>

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

TIP

For <Comment> and <Newsletter>:

When you're writing your own theme, you may offer user options whether to enable or not. In this scenario, you can still simply put those components in your layout component because it has handled this condition. It'll render nothing without error if the feature is disabled.