VuePress Create Custom Component

May 31, 2019

Create a component docs/.vuepress/components/COMPONENT_NAME.vue.

Example of TestAlert.vue, with a button which show alert when clicked.

    <button @click="testAlert">{{ displayText }}</button>

export default {
  props: ['displayText'],
  methods: {
    testAlert() {
      alert('Test Alert');

<style scoped>
button {
  background-color: #4CAF50;

NOTE: The syntax is exactly the same as Vue.js Single File Components.

You can use this component in any markdown file (e.g. docs/

home: true
permalink: /

## Test Component

<TestAlert display-text="Test" />

NOTE: You might be interested with Import Vue.js Component Into VuePress.


This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.