https://github.com/backrunner/markvue
Allows you mix Vue SFC or component into Markdown
https://github.com/backrunner/markvue
component-library markdown vue vue3
Last synced: 2 months ago
JSON representation
Allows you mix Vue SFC or component into Markdown
- Host: GitHub
- URL: https://github.com/backrunner/markvue
- Owner: backrunner
- License: mit
- Created: 2021-12-10T18:30:55.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-11T15:17:09.000Z (over 4 years ago)
- Last Synced: 2025-10-25T16:51:38.629Z (8 months ago)
- Topics: component-library, markdown, vue, vue3
- Language: Vue
- Homepage: markvue.vercel.app
- Size: 175 KB
- Stars: 27
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MarkVue
Allows you to mix Vue component or Vue SFC into Markdown, inspired by `@vue/sfc-playground`.
## How to use
1: Install the package:
```bash
npm install markvue --save
```
2: Import it to your project:
```js
import MarkVue from 'markvue';
import { createApp } from 'vue';
import App from './app.vue';
const app = createApp(App);
app.use(MarkVue);
app.mount('#app');
```
Our component only support Vue 3, Vue 2 is not supported.
3: Use it in your pages:
```vue
import { defineComponent } from 'vue';
const content = `
# Title
## Subtitle
Here's some content and the following is a vue sfc.
<vue-sfc>
<template>
<div class="sfc-test">
<button @click="count++">{{ count }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
button {
padding: 6px 12px;
background: #41aeff;
color: #fff;
font-weight: 600;
border-radius: 6px;
}
second sfc
Here's a vue component stub.
`
export default defineComponent({
setup() {
return {
content,
};
},
});
```
For Vue SFC, markvue will inject Vue into the SFC as `context`, you can import APIs from Vue directly.
If you want to import something from other package, be sure to put it in the `context`, and bind it to markvue, just like this:
```vue
import SOMETHING from 'SOME_PACKAGE';
return {
content: `
<vue-sfc>
<template>
<div>{{ content }}</div>
</template>
<script setup>
import { SOME_METHOD } from 'SOME_PACKAGE';
return {
content: SOME_METHOD(),
};
`,
context: {
SOME_PACKAGE: SOMETHING,
},
};
```
You can also put a Vue component into `context` directly, you can mix it into your Markdown like this:
```markdown
# Title
content
```
```vue
import myComponent from './myComponent.vue';
return {
context: {
myComponent,
},
};
```
If you want to add `class` or some other attribute in the root element of Vue SFC or Vue component, you can just add it to the `` or `` tag, like this:
```Markdown
or
```
For custom options of `marked`, you can set an attribute `markedOptions` to `markvue`, like this:
```vue
```
## Features
Supported SFC Features:
- ``
- Scoped styles
Unsupported SFC Features:
- TypeScript
- Style Preprocessors
- Babel transform (The script which your wrote in the SFC will only be compiled by `@vue/compiler-sfc`, you need to ensure the compatibility by yourself)
## License
MIT