How to implement VUE HEADER component?

I have a small web based VUE application. It contains about five pages. Each page has a title. Currently the title is just simply a static H2 tag.

I would like to implement a scrolling animation for the title as in iOS. When the user scrolls up, the title of the page scrolls into the header component.

I already have all the CSS and animation part. I have a proof of concept for that. My question is about the VUE part. How shall I implement the header? As a VUE component? Or as a VUE Composable? Or both?

Each page has a title. Currently a static string in the H2 tag.

I am thinking about a header component for all the UI of the header. And the scrolling animation. When the user scrolls up, then the H2 title of the page scrolls behind the header. But the title text thne appears in the header and stays there. (As for example in iOS settings.)

How could each page set the title in the header component?

Comments

[hrubysi]

This could be done through layout, which would be responsible for rendering both page title and header.

If you would like to have more flexibility with this, you could use two components eg. StickyTitle and AppHeader and one singleton composable useStickyTitle, which would be accessed by both components.

Also consider Vue Discord community for getting help, as I believe it is more active.

[Robert]

Here is a GIF of the "LargeTitleBar" animation that I am talkin about: swiftsenpai.com/development/large-...

That's what I lile to implement in WEB/CSS/VUE