The latest articles on DEV Community by Robert (@doogiemuc). https://dev.to/doogiemuc https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1268679%2Ffac43b4c-d96d-4b1c-b1ed-1834cd05c844.jpeg https://dev.to/doogiemuc en Robert Mon, 29 Jan 2024 15:38:11 +0000 https://dev.to/doogiemuc/how-to-implement-vue-header-component-27jo https://dev.to/doogiemuc/how-to-implement-vue-header-component-27jo <p>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.</p> <p>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.</p> <p>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?</p> <p>Each page has a title. Currently a static string in the H2 tag.</p> <p>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.)</p> <p>How could each page set the title in the header component? </p> vue javascript