Link component with suppport for Vue Router
A versatile Vue 3 Link component with TypeScript support, Vue Router integration, and external link icon support.
- 🎯 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)
``bash`
npm install @phila/phila-ui-linkor
yarn add @phila/phila-ui-linkor
pnpm add @phila/phila-ui-link
`vue
`
`vue`
Add an external link icon to links that go to external domains by setting the isExternal prop:
`vue
`
| 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) |
`vue
`
`vue`
`vue`
`vue`
`bash`
pnpm install
`bash`
pnpm dev
`bash`
pnpm build
`bash``
pnpm type-check
MIT