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: