@duch-web/base-components

Professional Nuxt 3 components for pharmaceutical and healthcare websites, built with Vue 3 and TailwindCSS.

📦 Installation

npm install @duch-web/base-components

🚀 Quick Setup

// nuxt.config.js
export default defineNuxtConfig({
  modules: ['@duch-web/base-components/nuxt']
})

Now use components anywhere without imports!

📋 Components Menu

• 🔘 BaseButton - Smart button/link component
• 🍔 BaseHamburgerButton - Animated mobile menu toggle
• 🖼️ BaseImage - Enhanced image with styling options
• 🔗 BaseLinkIcon - Link with trailing icons
• 📧 BaseMailto - Email link generator
• 🎥 BaseVimeo - Responsive video embed

BaseButton

Smart button that automatically renders as <button>, <NuxtLink>, or <a> based on props.

Usage Examples

<!-- Internal navigation -->
<BaseButton to="/about">About Us</BaseButton>

<!-- External link -->
<BaseButton href="https://example.com">Visit Site</BaseButton>

<!-- Form button -->
<BaseButton type="submit" @click="handleSubmit">Submit</BaseButton>

<!-- Custom styling -->
<BaseButton 
  to="/contact" 
  bg="bg-red-500" 
  bgHover="bg-red-600"
  color="text-white"
>
  Contact Us
</BaseButton>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | to | String | - | NuxtLink route (makes it a router link) | | href | String | - | External URL (makes it an anchor tag) | | type | String | "button" | Button type (button, submit, reset) | | bg | String | CSS var | Background color class | | bgHover | String | CSS var | Hover background color class | | color | String | CSS var | Text color class | | disabled | Boolean | false | Disabled state | | class | String | "" | Additional CSS classes |

How it works: The component automatically chooses the right HTML element based on your props:

• Has to? → Renders as <NuxtLink>
• Has href? → Renders as <a>
• Neither? → Renders as <button>

BaseHamburgerButton

Animated hamburger menu button for mobile navigation with smooth transitions.

Usage Examples

<template>
  <BaseHamburgerButton 
    :active="menuOpen" 
    @click="toggleMenu"
  />
  
  <!-- Custom colors -->
  <BaseHamburgerButton 
    :active="menuOpen" 
    @click="toggleMenu"
    bg-color="bg-navy-500"
    text-color="text-white"
  />
  
  <!-- French language -->
  <BaseHamburgerButton 
    :active="menuOpen" 
    @click="toggleMenu"
    lang="fr"
  />
</template>

<script setup>
const menuOpen = ref(false)

const toggleMenu = () => {
  menuOpen.value = !menuOpen.value
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | active | Boolean | false | Active/open state (animates the icon) | | bgColor | String | CSS var | Background color class | | textColor | String | CSS var | Line color class | | lang | String | "en" | Language for aria-label (en/fr) |

Animation: Smoothly transforms from hamburger (☰) to X (✕) when active.

BaseImage

Enhanced image component with lazy loading, responsive sizing, and styling options.

Usage Examples

<!-- Basic image -->
<BaseImage src="/hero.jpg" alt="Hero image" />

<!-- Styled image -->
<BaseImage 
  src="/logo.png" 
  alt="Company Logo"
  rounded="full"
  shadow="lg"
  loading="eager"
/>

<!-- Responsive image -->
<BaseImage 
  src="/banner.jpg" 
  alt="Banner"
  width="800"
  height="400"
  rounded="xl"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | String | Required | Image source URL | | alt | String | Required | Alt text for accessibility | | loading | String | "lazy" | Loading strategy (lazy, eager) | | width | String/Number | - | Image width | | height | String/Number | - | Image height | | rounded | String | "" | Border radius (sm, md, lg, xl, 2xl, full) | | shadow | String | "" | Drop shadow (sm, md, lg, xl, 2xl) | | class | String | "" | Additional CSS classes |

Features: Automatic lazy loading, error handling, and responsive behavior.

BaseLinkIcon

Link component with trailing icons for enhanced navigation UX.

Usage Examples

<!-- Internal link with arrow -->
<BaseLinkIcon 
  to="/products" 
  text="View Products"
  icon="arrow-right"
/>

<!-- External link -->
<BaseLinkIcon 
  href="https://example.com" 
  text="External Site"
  icon="external"
/>

<!-- Download link -->
<BaseLinkIcon 
  href="/brochure.pdf" 
  text="Download Brochure"
  icon="download"
/>

<!-- Custom styling -->
<BaseLinkIcon 
  to="/services" 
  text="Our Services"
  classColor="text-blue-500"
  classColorOver="text-blue-700"
/>

<!-- Using slot for custom text -->
<BaseLinkIcon to="/about" icon="arrow-right">
  Learn More About Us
</BaseLinkIcon>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | to | String | - | NuxtLink route (internal navigation) | | href | String | - | External URL or file path | | text | String | - | Link text (can also use default slot) | | icon | String | "arrow-right" | Icon type (arrow-right, external, download) | | classColor | String | CSS var | Default color class | | classColorOver | String | CSS var | Hover color class | | class | String | "" | Additional CSS classes |

Animation: Icon slides right on hover for enhanced interaction feedback.

BaseMailto

Email link component that generates proper mailto: URLs with advanced options.

Usage Examples

<!-- Simple email link -->
<BaseMailto email="[email protected]" />

<!-- Email with subject and body -->
<BaseMailto 
  email="[email protected]"
  subject="Product Inquiry"
  body="Hello, I would like to know more about..."
/>

<!-- Advanced email with CC/BCC -->
<BaseMailto 
  email="[email protected]"
  subject="Quote Request"
  cc="[email protected]"
  bcc="[email protected]"
  :show-icon="false"
>
  Request Quote
</BaseMailto>

<!-- Custom styling -->
<BaseMailto 
  email="[email protected]"
  class="text-blue-500 hover:text-blue-700 font-semibold"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | email | String | Required | Email address (validated) | | subject | String | - | Email subject line | | body | String | - | Email body text | | cc | String | - | Carbon copy recipients | | bcc | String | - | Blind carbon copy recipients | | showIcon | Boolean | true | Show email icon | | class | String | CSS var | Link styling classes |

Features: Automatic email validation, URL encoding, and customizable styling.

BaseVimeo

Responsive Vimeo video embed with loading states and player controls.

Usage Examples

<!-- Basic video -->
<BaseVimeo video-id="123456789" />

<!-- Custom aspect ratio -->
<BaseVimeo 
  video-id="123456789"
  aspect-ratio="4:3"
/>

<!-- Video with autoplay -->
<BaseVimeo 
  video-id="123456789"
  :autoplay="true"
  :muted="true"
  :loop="true"
/>

<!-- Square video -->
<BaseVimeo 
  video-id="123456789"
  aspect-ratio="1:1"
  :controls="false"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | videoId | String | Required | Vimeo video ID | | width | String/Number | "100%" | Video width | | height | String/Number | 315 | Video height | | title | String | "Vimeo video player" | Video title for accessibility | | aspectRatio | String | "16:9" | Aspect ratio (16:9, 4:3, 1:1) | | autoplay | Boolean | false | Auto-play video | | loop | Boolean | false | Loop video | | muted | Boolean | false | Mute audio | | controls | Boolean | true | Show player controls | | class | String | "" | Additional CSS classes |

Features: Loading states, error handling with retry, responsive design, and full Vimeo player API support.

🎨 Styling & Theming

Components use CSS custom properties for colors, making them adaptable to any design system:

/* Default colors (included in package) */
:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-on-primary: #ffffff;
}

/* Override with brand colors */
:root {
  --color-primary: #193153;        /* Navy */
  --color-primary-hover: #0f1f35;  /* Darker Navy */
  --color-on-primary: #ffffff;     /* White text */
}

Import the default styles:

import '@duch-web/base-components/style.css'

🔧 Development

# Install dependencies
npm install

# Build for production
npm run build

# Development mode with watch
npm run dev

📄 License

MIT License - Open source and free to use.