Text Link

An inline content link for documentation copy, hints and external references without button padding or background styles.

Installation

npx alixan-ui-nuxt add text-link

Usage

Read the installation guide before copying components.

<script setup lang="ts">
import TextLink from '@/components/ui/text-link/TextLink.vue';
</script>

<template>
	<p class="text-muted-foreground">
		Read the
		<TextLink href="/installation">
			installation guide
		</TextLink>
		before copying components.
	</p>
</template>

External Link

For more detailed information, visit the Nuxt i18n documentation.

<script setup lang="ts">
import InfoBox from '@/components/ui/info-box/InfoBox.vue';
import TextLink from '@/components/ui/text-link/TextLink.vue';
</script>

<template>
	<InfoBox>
		For more detailed information, visit the
		<TextLink
			href="https://i18n.nuxtjs.org/"
			target="_blank"
		>
			Nuxt i18n documentation.
		</TextLink>
	</InfoBox>
</template>

API Reference

Prop	Type	Default	Description
href	string	-	Destination URL for the link.
target	'_blank' \| '_self' \| '_parent' \| '_top'	-	Anchor target. When set to _blank, rel is set to noopener noreferrer.