Marp renderer component for Vue.
This component is suited to create presentation tools integrated with Marp by Vue. Marp would create the static slide contents consist of plain HTML and CSS, so you have to notice that it's not suited to control the content of your slide by Vue.
Eagle.js framework is a good choice to create beautiful slide contents with making full use of Vue power. If you really think to need, you can even use Marp Vue in that frameworks.
# yarn
yarn add @marp-team/marp-core @marp-team/marp-vue
# npm
npm install --save @marp-team/marp-core @marp-team/marp-vue
This is a simple usage of Marp renderer component. It renders slides via inline SVG to <div>
elements.
<template>
<div id="app">
<MarpRenderer :markdown="markdown" />
</div>
</template>
<script>
import { MarpRenderer } from '@marp-team/marp-vue'
const markdown = `
# Page 1
---
## Page 2`
export default {
components: { MarpRenderer },
data: () => ({ markdown }),
}
</script>
<div>
<div class="marp-xxxxxxxx">
<svg data-marpit-svg viewBox="0 0 1280 960">
<foreignObject width="1280" height="960">
<section><h1>Page 1</h1></section>
</foreignObject>
</svg>
</div>
<div class="marp-xxxxxxxx">
<svg data-marpit-svg viewBox="0 0 1280 960">
<foreignObject width="1280" height="960">
<section><h2>Page 2</h2></section>
</foreignObject>
</svg>
</div>
</div>
We also provide
Marp
component and actuallyMarpRenderer
is an alias toMarp
. We recommend to useMarpRenderer
becasue the multi-word component name is an essential rule in Vue style guide.
Marp constructor options can change in options
prop.
<template>
<div id="app">
<MarpRenderer markdown=":+1:" :options="options" />
</div>
</template>
<script>
import { MarpRenderer } from '@marp-team/marp-vue'
const options = {
inlineSVG: false,
emoji: {
shortcode: true,
unicode: true,
},
}
export default {
components: { MarpRenderer },
data: () => ({ options }),
}
</script>
You can use a custom renderer by passing slot content to children. MarpSlide
component is required to render slides provided by slot props.
<template>
<div id="app">
<MarpRenderer :markdown="markdown" v-slot="slides">
<div class="slide" v-for="(s, i) in slides" :key="i">
<MarpSlide :slide="s.slide" />
<p v-for="(comment, i) in s.comments" v-text="comment" :key="i" />
</div>
</MarpRenderer>
</div>
</template>
<script>
import { MarpRenderer, MarpSlide } from '@marp-team/marp-vue'
const markdown = '# :a: <!-- A -->\n\n---\n\n# :b: <!-- B -->'
export default {
components: { MarpRenderer, MarpSlide },
data: () => ({ markdown }),
}
</script>
ℹ️ See also Scoped Slots in the document of Vue.
For the best performance of the integrated web app, MarpWorker
component allows using Web Worker for Markdown conversion. It has a lot of clear advantages over a regular MarpRenderer
component.
- It does not block UI thread while converting large Markdown.
- A blazing fast live preview by a simple but clever queueing system is available.
- No longer need to include a huge Marp Core into main JS.
- Web Worker will be loaded asynchronously, so the first paint will not block.
The renderer using worker may be default component of Marp Vue in future.
You can use it just by swapping from MarpRenderer
to MarpWorker
. By default, MarpWorker
will use a pre-built worker via jsDelivr CDN.
<template>
<div id="app">
<MarpWorker markdown="# Hello, Marp Worker!" />
</div>
</template>
<script>
import { MarpWorker } from '@marp-team/marp-vue'
export default { components: { MarpWorker } }
</script>
The custom worker may specify via worker
prop.
<template>
<div id="app">
<MarpWorker :worker="worker" markdown="# Hello, Marp Worker!" />
</div>
</template>
<script>
import { MarpWorker } from '@marp-team/marp-vue'
export default {
components: { MarpWorker },
data: () => ({
worker: new Worker('worker.js'),
}),
}
</script>
// worker.js
require('@marp-team/marp-vue/lib/worker')()
MarpWorker
's custom renderer might be called with undefined
slides argument, unlike Marp
. It means an initial rendering of the component while preparing worker.
You may show waiting user a loading message as follows:
<MarpWorker markdown="# Hello, Marp Worker!" v-slot="slides">
<div class="marp" v-if="slides">
<div class="slide" v-for="(s, i) in slides" :key="i">
<MarpSlide :slide="s.slide" />
</div>
</div>
<p v-else>
Loading Marp Worker...
</p>
</MarpWorker>
Or initial
named slot allows showing individually defined template while loading worker:
<MarpWorker markdown="# Hello, Marp Worker!">
<template #initial>
<p>Loading...</p>
</template>
<template #default="slides">
<div class="slide" v-for="(s, i) in slides" :key="i">
<MarpSlide :slide="s.slide" />
</div>
</template>
</MarpWorker>
- Implement Vue renderer component based on our prototype
- Support rendering in worker
- Allow using worker via CDN (
importScript()
) - Use worker hosted on CDN by default
- Allow using worker via CDN (
- Support additional theme(s)
- Support swapping engine (e.g. Marpit)
Managed by @marp-team.
Yuki Hattori (@yhatt)