I am trying to dynamic load Reveal.js inside a basic SPA router in vanilla JS, but I simply can’t get Reveal.js running. I get the background, so it is recognized and the files are loaded. It just doesn’t give me the slides correctly. I simply can’t find the solution neither with Google, LLM’s or anything like these. Can anybody help me before I get completely insane 🙂
index.html
main.js
|- views
| |- index.html
| |- index.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="main.js" type="module"></script>
</body>
</html>
main.js
const route = (event) => {
event = event || window.event;
event.preventDefault();
window.history.pushState({}, '', event.target.href);
handleLocation();
};
const routes = {
'/': { title: 'Home', path: '/views/index.html', script: '/views/index.js' },
'404': { title: '404', path: '/views/404.html' },
};
const handleLocation = async () => {
const path = window.location.pathname;
const route = routes[path]?.path || routes['404'].path;
const html = await fetch(route).then((data) => data.text());
document.querySelector('#app').innerHTML = html;
// Load scripts
if (routes[path]?.script) {
const script = document.createElement('script');
script.type="module";
script.src = routes[path].script;
document.body.appendChild(script);
}
};
window.onpopstate = handleLocation;
window.route = route;
handleLocation();
views/index.html
<div class="reveal">
<div class="slides">
<section>
<h1>Ladida</h1>
</section>
</div>
</div>
views/index.js
import 'reveal.js/dist/reset.css';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css';
import Reveal from 'reveal.js';
import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
(async () => {
requestAnimationFrame(() => {
Reveal.initialize({
plugins: [Highlight],
slideNumber: 'c/t',
showSlideNumber: 'all',
});
});
})();
You need to sign in to view this answers
Leave feedback about this