vanilla-spa
v1.0.1
Published
A simple SPA implementation built in vanilla javascript.
Downloads
4
Readme
vanilla-spa
A simple SPA implementation built in vanilla javascript.
Installation
You can easily install VanillaSpa using npm.
npm install vanilla-spa --saveDependencies
None! VanillaSpa is made entirely in vanilla ES6 javascript.
However, Since VanillaSpa uses AJAX to dynamically load views, you'll need to set up a local server.
The simplest way to do this is by globally installing http-server using npm.
Then, run http-server in your code directory and open your browser to localhost:8080
npm install -g http-server
cd /path/to/project/
http-server -oindex.html
The index.html is like a "shell" for the routes to be injected into.
<body>
<!-- The main element that will receive the routed content -->
<main></main>
<!-- Load Vanilla Spa -->
<script src="node_modules/vanilla-spa.js"></script>
<!-- Load the router -->
<script src="./router.js"></script>
</body>router.js
This is where your route configuration goes.
const r = new Router(
// first, pass in the route configuration
{
about: new Layout(new Page('menu.html'), new Page('about.html')),
home: new Layout(new Page('menu.html'), new Page('home.html')),
'#default': new Page('menu.html'),
},
// then, pass in the element to inject the route into
document.querySelector('main')
);