🌏 Translated with the assistance of DeepSeek and ChatGPT

TextOutline

A lightweight component to add an outline (stroke) to text — useful for emphasized or decorative typography.

Basic Usage

Provide text as default slot. Use color to set the outline color and outlineWidth to control the stroke thickness.

Outlined Text

Outlined Text

<template>
	<div>
		<div style="padding: 8px; background: #222">
			<px-text-outline color="#fff" :outlineWidth="2" style="color: rgb(0, 168, 145)">
				Outlined Text
			</px-text-outline>
		</div>
		<div style="padding: 24px; background: #222">
			<px-text-outline
				color="#fff"
				:outlineWidth="2"
				style="font-size: 24px; color: rgb(0, 168, 145)"
			>
				Outlined Text
			</px-text-outline>
		</div>
	</div>
</template>

Color Fill

color accepts any CSS color string (hex, rgb/rgba, named colors, gradients via CSS var or shorthand background values) and will be used as the text outline fill.

Outlined Text

<template>
	<div style="padding: 8px; background: #222">
		<px-text-outline
			color="linear-gradient(-90deg, red 9%, blue 88%)"
			:outlineWidth="3"
			style="font-size: 24px"
		>
			Outlined Text
		</px-text-outline>
	</div>
</template>

Outline Width

outlineWidth controls the stroke width. When set as a number it is treated as pixels; strings are used verbatim (e.g. '0.1em', '2px').

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

Outlined Text

<template>
	<div>
		<div style="padding: 8px; background: #222" v-for="value in [1, 2, 4, 8, 16]" :key="value">
			<px-text-outline
				color="#fff"
				:outlineWidth="value"
				:style="{
					fontSize: 14 + value + 'px',
					color: 'rgb(0, 168, 145)'
				}"
			>
				Outlined Text
			</px-text-outline>
		</div>
		<div style="padding: 8px; background: #222" v-for="value in [1, 2, 4]" :key="value">
			<px-text-outline
				color="#fff"
				outlineWidth="0.1em"
				:style="{
					fontSize: 14 * value + 'px',
					paddingLeft: '0.2em',
					paddingRight: '0.2em',
					color: 'rgb(0, 168, 145)'
				}"
			>
				Outlined Text
			</px-text-outline>
		</div>
	</div>
</template>

API

TextOutlineProps

Attribute	Type	Optional	Default	Description	Version
color	string	True		Fill color — accepts any valid CSS color or background string (e.g. '#fff', 'rgba(255,0,0,0.8)', 'linear-gradient(...)').	0.0.3
outlineWidth	number | string	True	1	Stroke width — accepts number or string. Number is treated as pixels (e.g. 1 → 1px); string is used verbatim (e.g. '0.1em', '2px'). Default 1.	0.0.3
autoPadding	boolean	True	true	Automatically adds left and right padding based on outline width to prevent the outline from being clipped.	0.0.3

TextOutlineSlots

Slot	Parameter	Description	Version
default		Default slot for the text content.	0.0.3