HLC Layer UI

A collection of Vue 3 components for Nuxt 3 applications, including a Button component and a Hero Slider pattern with Prismic CMS integration.

Installation

# Using bun
bun add hlc-layer-ui

# Using npm
npm install hlc-layer-ui

# Using yarn
yarn add hlc-layer-ui

Setup

Add hlc-layer-ui to the extends array in your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['hlc-layer-ui']
})

Components

Button Component

<template>
  <Button variant="primary">Click me</Button>
  
  <!-- With loading state -->
  <Button loading>Loading...</Button>
  
  <!-- Different variants -->
  <Button variant="secondary">Secondary</Button>
  <Button variant="danger">Danger</Button>
  
  <!-- Different sizes -->
  <Button size="small">Small</Button>
  <Button size="large">Large</Button>
</template>

Button Props

| Name | Type | Default | Description | |----------|---------|-----------|------------------------------------------------| | variant | string | 'primary' | Button style: 'primary', 'secondary', 'danger' | | size | string | 'medium' | Button size: 'small', 'medium', 'large' | | loading | boolean | false | Shows a loading spinner | | disabled | boolean | false | Disables the button |

Hero Slider Pattern

A modern, responsive hero slider with Prismic CMS integration, perfect for showcasing featured content, promotions, and announcements.

<template>
  <HeroSlider :data="sliderData" />
</template>

<script setup lang="ts">
import type { SliderData } from 'hlc-layer-ui'

const sliderData: SliderData = {
  primary: {
    enable_auto_rotation: true,
    slider_full_width: true,
    hide_content_on_mobile: false
  },
  items: [
    {
      hero_image_desktop: {
        dimensions: { width: 3840, height: 1410 },
        alt: "Slide Example",
        url: "your-image-url.jpg",
        // ... other Prismic image properties
      },
      hero_image_mobile: {
        // ... mobile image properties
      },
      enable_slide: true,
      schedule_to: "2025-02-14T22:59:00+0000",
      hero_helper_text: "FEATURED",
      hero_helper_text_color: "#D8A19A",
      hero_title: "Your Slide Title",
      hero_content: [
        {
          type: "paragraph",
          text: "Your slide content here.",
          spans: [],
          direction: "ltr"
        }
      ],
      hero_primary_cta_text: "Learn More",
      hero_primary_cta_link: {
        link_type: "Document",
        uid: "your-page"
      },
      hero_slider_theme: false,
      hero_content_mobile_background_color: "#F0D2CF"
    }
    // ... more slides
  ],
  id: "your-slider-id",
  slice_type: "hero_slider"
}
</script>

Hero Slider Features

• Responsive design with mobile/desktop images
• Auto-rotation support
• Full-width option
• Mobile content visibility toggle
• Primary and secondary CTAs
• Theme variations (light/dark)
• Scheduling support
• Rich text content with formatting

Best Practices

• Keep the number of slides between 3-5 for optimal user experience
• Ensure images are optimized and properly sized (desktop: 3840x1410px, mobile: 1242x1197px recommended)
• Use clear, action-oriented CTA text
• Keep content concise and focused
• Test slider behavior across different screen sizes
• Consider accessibility by providing meaningful alt text for images

Development

To start the development server and view the component demos:

bun run dev

License

MIT