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

``bash
npm install @phila/phila-ui-link


or

yarn add @phila/phila-ui-link

or

pnpm add @phila/phila-ui-link
`

Usage

$3

`vue



`

$3

`vue

`

$3

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

`vue

`

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

$3

`vue

`

$3

`vue

`

$3

`vue

`

$3

`vue

`

Development

$3

`bash
pnpm install
`

$3

`bash
pnpm dev
`

$3

`bash
pnpm build
`

$3

`bash
pnpm type-check
``

License

MIT