Multiple- and Single-page applications

Until now we have only discussed the use of web components on a single html page. In this chapter we will discuss how to setup your project that is based on multiple html pages (MPA) or a project that gives the user the experience that the site consists of multiple pages, but actually is based on a single html page (SPA). Because we use Vite as our build tool, we will start with a short introduction of how to setup a Vite project for MPA’s and SPA’s. We will then discuss how to setup a MPA and SPA project with Vite. And finally we will we explain how to setup routing in your project, so you can navigate between the different pages of your MPA or SPA.

Table of contents

• Vite project setup basics
• MPA project setup
• SPA project setup
  • Routing basics
  • Vaadin Router

To exercise the knowledge you gained from this chapter, you can try some challenges.

---

Home | Multiple- and Single-page applications | Vite project setup basics