Header

The Header component provides a page header complete with branding and navigation. The header can control the rendering of different content before and after login.

Examples

const isAuthenticated = false // this would typically come from the pinia app store upon login
const user = {} // this object typically would get populated from the pinia user store upon login
const siteName = imports.meta.env.VITE_SITE_NAME

<Header
    class="justify-between static p-4"
    :isAuthenticated="isAuthenticated"
    :user="user"
    :siteName="siteName"
  >
    <ul class="flex flex-row" v-if="!isAuthenticated">
      <li class="mr-4"><router-link :to="{ name: 'prices' }">Prices</router-link></li>
      <li><router-link :to="{ name: 'login' }">Sign In</router-link></li>
    </ul>
</Header>

An example can be seen in /frontend/App.vue

Component Props

Prop	Description	Options
siteName	the string name representing your site name
isAuthenticated	Boolean to control rendering content pre vs post login
user	an object with user data to populate logged in state

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
--