Package Exports

hlc-layer-ui
hlc-layer-ui/nuxt.config.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hlc-layer-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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