Skip to main content

​
Overview

Link Preview provides dynamic link previews that appear on hover. Supports both static images and URL-based previews with customizable dimensions.

​
Usage

<template>
  <!-- URL preview mode -->
  <LinkPreview url="https://example.com" :width="200" :height="125">
    Hover over me
  </LinkPreview>

  <!-- Static image mode -->
  <LinkPreview :isStatic="true" imageSrc="/preview.jpg">
    Hover for preview
  </LinkPreview>
</template>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
classstring""Custom class applied to the main element.
linkClassstring""Custom class applied to the link element.
widthnumber200Width of the preview image.
heightnumber125Height of the preview image.
isStaticbooleanfalseDetermines if the preview image is static or a URL preview (set to true for static mode).
imageSrcstring""The source of the image to display (required if isStatic is true).
urlstring""URL for the link and for generating the preview image (required if isStatic is false).

​
Dependencies

  • qss

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us