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.

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

<script>
export default {
  props: ['displayText'],
  methods: {
    testAlert() {
      alert('Test Alert');
    }
  }
}
</script>

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

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/README.md).

---
home: true
permalink: /
---

## Test Component

<TestAlert display-text="Test" />

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

References:

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