insert slide from component

[bgschiller]

I've been using eagle.js to make slides for an upcoming conference talk. Very nice! It addresses a couple of the complaints I had about using mdx-deck (their <Appear> component doesn't work to reveal deeply nested pieces, and it wasn't Vue!).

One difficulty I've run into is including a slide defined in another component. I've written most of my slides inline in App.vue. One of them is too big though (it has a big nested svg), and I'd like to put it in a component. When I do that, it doesn't seem to appear!

I have, in App.vue:

...
<slide>
  <h2>Who uses personal access tokens?</h2>
  <ul class="center-list">
    <li>GitHub, Trello, Twitter, many others</li>
    <li>Mostly targeted at developers</li>
  </ul>
  <span v-if="isParent">These are actually a solid step towards OAuth!</span>
</slide>
<PersonalAccessToken />
...

And then in PersonalAccessToken.vue:

<template>
  <div :steps="6" v-if="active">
    <svg class="white-back img-contain" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="397px" preserveAspectRatio="none" version="1.1" viewBox="0 0 568 397" width="568px" zoomAndPan="magnify">
    ...
    </svg>
  </div>
</template>
<script>
import eagle from 'eagle.js'

export default {
  name: 'PersonalAccessToken',
  mixins: [eagle.slide],
}
</script>

I've also tried replacing the top-level div in PersonalAccessToken.vue with a <slide>, as well as wrapping it in an <eg-transition> like in AwesomeInsertedSlide.vue in your eaglejs-demo.

My code is up at https://github.com/bgschiller/lets-build-oauth/blob/995f25b05d17c8a58078b6daaba64c747664901c/src/components/PersonalAccessToken.vue if it's useful to take a look. Thanks!

[Zulko]

Can you also share the code of your master document where you import the slide ? Have you tried with just text, to be sure its not a problem with the SVG ? Do you see a javascript error when opening your browser's developer toolkit ?

Two other remarks unrelated to this error. I recommend putting the SVG in its own .svg file and including it using include, it will work. (I use such an animated SVG here). Also I believe :steps="6" does nothing in your case. It needs to be provided in the export default (see the example):

 props: {
    steps: { default: 6 }
}

[bgschiller]

Thanks! Moving the steps part to props did the trick actually. I guess steps value needs to be supplied to the eagle.slide mixin?

To answer your questions: There were no JS errors in the console. The master doc script part looks like this

<script>
import eagle from 'eagle.js'
import PersonalAccessToken from './components/PersonalAccessToken.vue'

export default {
  mixins: [eagle.slideshow],
  name: 'app',
  components: {
    PersonalAccessToken,
  },
}
</script>