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: truepermalink: /---## Test Component<TestAlert display-text="Test" />

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

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.