marp-team/marp-vue

# yarn
yarn add @marp-team/marp-core @marp-team/marp-vue

# npm
npm install --save @marp-team/marp-core @marp-team/marp-vue

<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>

<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>

<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>

<template>
  <div id="app">
    <MarpWorker markdown="# Hello, Marp Worker!" />
  </div>
</template>

<script>
import { MarpWorker } from '@marp-team/marp-vue'

export default { components: { MarpWorker } }
</script>

<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 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>

<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>