A simple app for creating slide presentations with Vue.js

App.vue

<script setup lang="ts">
import { $ref } from "vue/macros";
import { onMounted, onUnmounted } from "vue";
import { SLIDE_TEXTS } from "./assets/slides/slideTexts";
import PresentationSlide from "./components/PresentationSlide.vue";

// Width of the slide images in pixels, change this if the images are of different width
const IMAGE_WIDTH_PX = 1024;
const MAX_INDEX = Object.keys(SLIDE_TEXTS).length;

let currentSlideIndex = 1;
let imageUrl = $ref("");
let text = $ref("");

function changeSlideToIndex(index: number) {
  imageUrl = new URL(`./assets/slides/${index}.jpg`, import.meta.url).href;
  text = SLIDE_TEXTS[index];
}

changeSlideToIndex(currentSlideIndex);

function changeSlide(forward: boolean) {
  let index = forward ? ++currentSlideIndex : --currentSlideIndex;
  if (currentSlideIndex < 1 || currentSlideIndex > MAX_INDEX) {
    currentSlideIndex = index = 1;
  }
  changeSlideToIndex(index);
  console.log(currentSlideIndex);
}

function changeSlideWithMouse(e: MouseEvent) {
  changeSlide(e.offsetX >= IMAGE_WIDTH_PX / 2);
}

function handleKeydown(e: KeyboardEvent) {
  switch (e.key) {
    case "ArrowLeft":
      changeSlide(false);
      break;
    case "ArrowRight":
      changeSlide(true);
      break;
  }
}

onMounted(() => {
  window.addEventListener("keydown", handleKeydown, undefined);
});
onUnmounted(() => {
  window.removeEventListener("keydown", handleKeydown);
});
</script>

<template>
  <main>
    <PresentationSlide
      :image-url="imageUrl"
      :text="text"
      @click="changeSlideWithMouse"
    />
  </main>
</template>

Slide.vue

<script setup lang="ts">
defineProps<{
  imageUrl: string;
  text: string;
}>();
</script>

<template>
  <div>
    <div><img :src="imageUrl" /></div>
    <p v-html="text"></p>
  </div>
</template>

slideTexts.ts

// save this to src/assets/slides/
export const SLIDE_TEXTS: {[name: number]: string} = {
  1: "First slide text",
  2: "Second <b>slide</b> text with HTML tags"
}

Can be used as a simple SlideShare clone.

Usage:

• With mouse: click on the right half of the slide image to move forward and on the left half to move backward.
• With keyboard: click → to move forward and ← to move backward.

Installation:

1. Create a Vue 3.2+ app.
2. Enable $ref() by adding plugins: [vue({ reactivityTransform: true })] to vite.config.ts.
3. Replace App.vue with the version above, change IMAGE_WIDTH_PX if your images are not 1024 pixels wide.
4. Add Slide.vue to src/components/.
5. Copy slide JPG images to src/assets/slides/, use slide numbers as filenames.
6. Copy slideTexts.ts to src/assets/slides/ and fill in the slide texts for each slide, using slide numbers as text indexes.
7. Run npm install && npm run dev to start the server or npm run build to compile for production.