Presentation slides using VueJS and EagleJS

Description

This repository contains all the files necessary for generating presentation slides using VueJS and EagleJS. An example can be found here.

The structure of this template was based on the presentation slides created by JiriChara.

The VueJS app uses the following VueJS components and modules:

• vue-burger-menu, a custom component is included in this presentation template so it automatically list the slides name retrieved from the file store.js.
• vue-svg-loader, with the properties cleanupIDs and removeUnknownsAndDefaultsset to false in vue.config.js.
• vue-router.
• vuex

Note (maybe it sounds unnecessary for most of you): When defining static data such as GSAP timelines for animations, you should use this.$options to store your static data in your component (i.e., slide).

Project configuration

1. Change the web page path in vue.config.js and in deploy.sh, presentation_template to github_pages_repository (e.g., phd_presentation), do not forget to modify your github username as well in deploy.sh.
2. Make the file deploy.sh executable,

chmod +x deploy.sh

3. Create your slides, namely create one vue file per slide, and reference them in store.js. You can change the following options:

   • name: component name

   • menuName: slide name displayed on the menu

   • path: displayed path by the vue-router

   • steps: [optional] number of steps the slide as

   • enterNext, enterPrev, leaveNext, leavePrev: [optional] transition effects (see EagleJS doc)

     or

   • enter, leave: [optional] (see EagleJS doc)

4. Change theme.css to adjust the theme template used (including the menu style).

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.