Eagle.js is a slideshow system built on top of the Vue.js web framework. It supports animations, themes, interactive widgets (for web demos), and makes it easy to reuse components, slides and styles across presentations. For a quick tour, see this slideshow:

Most of all, Eagle.js aims at offering a simple and very hackable API so you can get off the beaten tracks and craft the slideshows you really want.

Here is what the Eagle.js syntax looks like (using Pug):

.eg-slideshow
    slide
      h1 My slideshow
      h4 By Zulko

    slide
      h3 Title of this slide
      p  Paragraph 1.
      p  Paragraph 2.

    slide(:steps=3)
      h3 Slide with bullet points
      p(v-if='step >= 2') This will appear first.
      p(v-if='step >= 3') This will appear second.

If you are not familiar with Vue.js you will find Eagle.js harder to use than, say, Reveal.js, but on the long term Eagle.js makes it easier to organize your slides and implement new ideas.

You must have Node.js/npm installed to use Eagle.js.

Then the best to get started is to clone the example repo:

$ git clone https://github.com/Zulko/eaglejs-demo.git

Install the dependencies (they will only be downloaded in a local folder):

$ cd eaglejs-demo
$ npm install

Then run npm run dev to start the server, and open your browser at http://localhost:8080 to see the slideshows.

To start editing, click on My first slideshow to display this slideshow, then open the file eagle/src/slideshows/first-slideshow/FirstSlideshow.vue and change the content of the first slide. Observe the changes happen automatically in your browser. The only times you need to refresh the page is when you add remove or add slides to the presentation.

Install by npm

npm install --save eagle.js

Or install by yarn

yarn add eagle.js

Eagle.js is a vue plugin. You need to use eagle.js in your vue app's main file:

import Eagle from 'eagle.js'
// import eagle.js default styles
import 'eagle.js/dist/eagle.css'

Vue.use(Eagle)

Eagle.js's basic components are slideshow and slide. You use slideshow as mixin to write slideshow component, which could include multiple slides. A very basic Single File Component for slideshow would look like this:

<template lang="pug">
    slide(:steps="4")
      p(v-if="step >= 1")
        | {{step}}
      p(v-if="step >= 2")
        | {{step}}
      p(v-if="step >= 3")
        | {{step}}
      p(v-if="step >= 4")
        | {{step}}
</template>

<script>
import eagle from 'eagle.js'
export default {
  mixins: [eagle.slideshow]
}
</script>

We use slideshow's data step to control the conditional rendering in slide, thus slideshow is used as a mixin. Also by this way eagle.js exposes the maximum hackability to users.

slideshow can only be used as mixin.

Note: For vue mixins, template cannot be extended. slideshow needs one HTML element to wrap around your following slides because there are events registered to slideshow after component mounted. We recommend you to wrap your template in a eg-slideshow div for default styling.

You can configure your authored slideshow component with these properties:

A nested slideshow can be a inserted one or a embedded one. A embedded slideshow would its own events and embedded styles, while a inserted slideshow does not.

slide can be used both as mixin or component. If your want to author a complex slide, writing it as a seperated SFC with slide mixin would really help. Including the following template(pug) as wrapper in your slide component to keep the default style:

eg-transition(:enter='enter', :leave='leave')
  .eg-slide(v-if='active')
    .eg-slide-content
      // Your own markup...

You can configure slide with these properties:

enterPrev, enterNext, leavePrev and leaveNext provides flexibility if you want to customize the animation for prev/next direction. If set to null they will use default enter and leave styles.

Note: enter and leave must be set in pairs. Don't only set one property, because slide has two directions to move: prev/next, and both directions needs animations. We recommend either you set animation for all your slide on both enter and leave, or don't set any at all.

Under the hood, eg-transition is just vue's transition will support for animate.css: you can use animate.css's class name for enter and leave property and it just works. All eagle.js's transition effects, including slide, happen with this component, and you can use it just like using vue's transition.

Eagle.js ships several useful widgets that can be used in your slide:

1. eg-modal
2. eg-code-block (code highlighted by highlight.js)
3. eg-code-comment
4. eg-toggle
5. eg-radio
6. eg-triggered-message

See their usage in the demo project.

Eagle.js is an open source framework originally written by Zulko and released on Github under the ISC licence. Everyone is welcome to contribute!

Below are a few ideas that deserve more attention in the future:

• Bundler to make standalone HTML presentations
• PDF export?
• Themes
• Better docs? (What do JavaScript people use to write docs?)

1. Zulko(owner)
2. Yao Ding