Link Component

A versatile Vue 3 Link component with TypeScript support, Vue Router integration, and external link icon support.

Features

• 🎯 TypeScript support with full type definitions
• 🔗 Supports both Vue Router links and HTML anchor links
• 🌐 External link icon support via isExternal prop
• 🎨 Multiple variants and sizes
• ♿ Full accessibility support
• 🎭 Icon support (left, right, or icon-only)

Installation

npm install @phila/phila-ui-link
# or
yarn add @phila/phila-ui-link
# or
pnpm add @phila/phila-ui-link

Usage

Basic HTML Link

<script setup lang="ts">
import { PhilaLink } from "@phila/phila-ui-link";
</script>

<template>
  <PhilaLink href="https://www.phila.gov" text="Visit Philadelphia" />
</template>

Vue Router Link

<template>
  <PhilaLink to="/dashboard" text="Go to Dashboard" />
</template>

Links with External Icon

Add an external link icon to links that go to external domains by setting the isExternal prop:

<template>
  <!-- Link to external domain with icon -->
  <PhilaLink href="https://www.google.com" text="Visit Google" isExternal />

  <!-- Link to same domain without icon -->
  <PhilaLink href="/about" text="About Us" />
</template>

Props

| Prop | Type | Default | Description | | ---------------- | --------------------------- | ----------- | ------------------------------------------------------------ | | to | RouteLocationRaw | - | Vue Router route destination. Mutually exclusive with href | | href | string | - | HTML anchor href attribute. Mutually exclusive with to | | text | string | - | Link text content | | variant | 'default' \| 'on-primary' | 'default' | Link variant style | | size | ComponentSize | - | Link size | | disabled | boolean | false | Whether the link is disabled | | target | string | - | Link target (e.g., _blank) | | rel | string | - | Link rel attribute | | iconDefinition | IconDefinition | - | FontAwesome icon definition | | iconClass | string | - | FontAwesome icon class name | | iconRight | boolean | false | Position icon on the right | | iconOnly | boolean | false | Show only icon (no text) | | isExternal | boolean | false | Show external link icon | | ariaLabel | string | - | Accessible label for screen readers (required for icon-only) | | className | string | - | Additional CSS classes (from BaseProps) |

Examples

With Icons

<template>
  <!-- Icon on the left -->
  <PhilaLink href="/" text="Home" :iconDefinition="faHome" />

  <!-- Icon on the right -->
  <PhilaLink href="/next" text="Continue" :iconDefinition="faArrowRight" iconRight />

  <!-- Icon only (requires ariaLabel for accessibility) -->
  <PhilaLink href="/settings" :iconDefinition="faGear" iconOnly ariaLabel="Settings" />
</template>

Links with Target Attribute

<template>
  <PhilaLink href="https://example.com" text="Open in New Tab" target="_blank" rel="noopener noreferrer" />
</template>

Different Sizes

<template>
  <PhilaLink href="/" text="Large Link" size="large" />
  <PhilaLink href="/" text="Small Link" size="small" />
</template>

Disabled State

<template>
  <PhilaLink href="/" text="Disabled Link" disabled />
</template>

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT