The Design Decision to Manage App.vue Page State with a Simple currentPage Variable

Introduction

The DVD rental customer-facing app manages page transitions without Vue Router, using only the currentPage variable in App.vue. This article explains the reasoning behind this design decision.

Why We Didn’t Use Vue Router

• Given the app’s scale and requirements, simple state management was sufficient
• We prioritized integration with the Spring Boot backend and kept the frontend structure simple

Implementation

<!-- App.vue (excerpt) -->
<script setup lang="ts">
import { ref } from 'vue'
const currentPage = ref('home')
</script>

Actual Screens

What We Learned

Even with simple state management, as the number of pages grows, transition logic tends to scatter. Once the app reaches a certain scale, migrating to Vue Router is worth considering.