How to implement idea in Vuejs [Nuxt]? What is the logic behind building this SPA?

Question

Vue.js

Good afternoon! I just started using Vuejs + Nuxt in projects, so there are a lot of questions.
It is necessary to implement the following idea. For understanding I will build analogies. Think of a deck of cards as a collection of pages. We see the first one in full - this is the current page with content, and the other pages lie under it and only their upper parts are visible, where we can see the suit of the card (for example, T♦️), i.e. only the title of the page, the content (map image) is hidden. The protruding cards make up the "menu". When you click on an item of interest, the visible page goes to the end of the deck (this is if the page you want to go to is immediately after the current one), and the page of interest becomes on top, the content of which becomes visible. Also, if the desired page is, for example, the third one from the top, then when you click on it, the visible page and the second one, which immediately follows it, go to the end, etc.
The main issue in the architecture of this project. What should be in the components, what should be in the content? Should the menu item be duplicated on the page itself as part of the content? How to display, for example, only 5 main pages, and if we go deeper Blog -> Article, then add one card (blog article) to the set when opening the article, and delete the card with the article when returning back to the blog?
For additional questions, if I did not explain everything clearly, I will answer in the comments.

Answer 1

Here is a schematic: