Our own framework

App navigation can be significantly more complex than website navigation, making direct comparisons impractical. That's why we don’t rely solely on URL-based navigation (like vue-router). Instead, we use a custom navigation framework specifically designed for apps, providing a smoother, more native-like experience. URL-based navigation is a nice-to-have for Stamhoofd and is only supported for the most important routes.

Why?

Six years ago we built our own system because there was no system like this available for Vue. vue-app-navigation. Since then, it has proven itself reliable and effective: we haven’t switched to anything else and kept expanding and improving the system. This framework has been a key reason we’re able to build fast and efficiently.

Benefits

• Better separation of views: Views don’t need to worry about how they’re displayed. Their CSS and HTML don’t have to handle presentation details.
  • For example, if you want to add a back button, the view doesn’t need to know where it goes back to—you just call pop() or dismiss(). ↔ This is better than a back button with a fixed URL.
• You can reuse the same view in many places, even with different URLs.
• You can navigate deeply, like editing a category inside another category, and so on, without limits.
• Responsive design made easy: On desktop, you might want split views or popups, but on mobile, you want everything stacked vertically. Vue-app-navigation handles this automatically, so you don’t have to worry about it.
• URLs are managed automatically.
• Supports browser back and forward buttons smoothly.
• Animations are smooth and feel natural.

Writing your first view

We use single-file-components in Vue. That means that your HTML, TypeScript and SCSS are all in the same file.

<aside> <img src="/icons/paint-brush-wide_pink.svg" alt="/icons/paint-brush-wide_pink.svg" width="40px" />

As a best practice, avoid defining custom CSS in your files unless they only affect the component. If you need custom CSS, you are probably doing something wrong. If you use the right building blocks, you’ll never need to have custom margins or paddings except in very specific views (e.g. a seat plan editor).

</aside>

<aside> 🧩

In this guide, we’ll explain how the framework works. We’ll also use some specific Stamhoofd concepts—like our custom class names and components. Keep in mind that the core framework (everything you import from vue-app-navigation) is lightweight and doesn’t include many built-in components or views. That’s where Stamhoofd comes in, providing additional building blocks on top of the framework.

</aside>