spa-routing v1.2.3

About The Project

Turn your web app into a Single Page App quickly and easily without tons of refactoring or tight coupling.

Prerequisites

For initial navigation to your routes (i.e. visiting example.com/route directly) to work, you'll need to configure your server to direct all traffic to your app.

Example (express.js)

app.get(/.*/, (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});

Installation

CDN

<script
  src="https://cdn.jsdelivr.net/npm/spa-routing@latest"
  type="module"
></script>

Usage

1. (OPTIONAL) Set the root of your app, if it's not the same as the origin.

   <script type="module">
     import { setRoot } from "https://cdn.jsdelivr.net/npm/spa-routing@latest";
     setRoot("/example/root");
   </script>

2. Wrap route content in the <spa-route> tag, with an appropriate path attribute value.

   <spa-route path="/home">
     <h1>Home</h1>
     ...
   </spa-route>

3. Add links to those route(s).

   <a href="/home">Home</a>

4. Style <spa-route> elements in active/inactive states using the active attribute.

   spa-route:not([active]) {
     display: none;
   }

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.