Second Pub UI

A Nuxt module providing Cathay Holdings UI components for consistent branding and user experience.

Features

• 🏢  Cathay Holdings branded header component with breadcrumbs, title, and user profile
• 📄  Footer component with copyright and optional service/privacy links
• 🖼️  Logo components in horizontal, large, and small variants
• 🎨  Integrated with Nuxt UI and Tailwind CSS for consistent styling
• 🔧  Auto-registration of components for easy usage

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @hugoninee/second-pub-ui

That's it! You can now use Second Pub UI components in your Nuxt app ✨

Components

PubHeader

A header component featuring:

• Breadcrumb navigation
• Page title
• User avatar with tenant chip
• User name display
• Frontend/backend toggle switch

<template>
  <PubHeader />
</template>

PubFooter

A footer component with:

• Cathay Holdings copyright notice
• Optional service terms or privacy policy links

<template>
  <!-- Default footer -->
  <PubFooter />

  <!-- Footer with service terms -->
  <PubFooter property1="Service" />

  <!-- Footer with privacy policy -->
  <PubFooter property1="Privacy" />
</template>

Logo Components

Three logo variants for different use cases:

• PubLogoHorizontal: Horizontal layout for headers and navigation
• PubLogoLarge: Large vertical layout for landing pages
• PubLogoSmall: Small vertical layout for compact spaces

<template>
  <PubLogoHorizontal />
  <PubLogoLarge />
  <PubLogoSmall />
</template>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release