How to use link-prevue with an external API

In this post, I’ll show you how to leverage the link-prevue package with an external API to fetch rich link previews. I’ll also explain how to deploy the link-prevue-api API to Cloudflare Workers for a scalable and efficient solution.

Note: This tutorial uses Bun as the package manager and runtime. If you don’t have Bun installed, follow the official documentation to set it up on your system.

Motivation

By default, the link-prevue component uses a public API hosted on Cloudflare Workers under a free plan. Due to the high volume of requests from all users, this free tier can quickly be exhausted, causing the API to stop responding or become unreliable. This can negatively impact your project if you rely on the shared public endpoint.

The main motivation for this blog post is to show you how to deploy your own instance of the link-prevue API, so you have an exclusive endpoint for your project. Cloudflare’s free tier is quite generous and should be sufficient for most personal or small-to-medium projects. If you need more capacity, you can always upgrade to a paid plan for higher limits and better reliability.

By running your own API, you ensure consistent performance and avoid disruptions caused by shared usage. This guide will walk you through the process so you can take full control of your link preview service.

API Setup

First, clone the API repository:

git clone https://github.com/nivaldomartinez/link-prevue-api-node.git
cd link-prevue-api-node

Install dependencies using Bun:

bun install

Test the API locally

Before deploying to Cloudflare, you can test the API locally to make sure it works. Start the development server:

bun run dev

By default, the API will be available at http://localhost:8787/preview. You can test it using curl or any HTTP client:

curl --location 'http://localhost:8787/preview?url=https://bun.sh/'

The response will be a JSON object with the link preview, for example:

{
  "title": "Bun — A fast all-in-one JavaScript runtime",
  "description": "Bundle, install, and run JavaScript & TypeScript — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.",
  "image": "https://bun.sh/share_v3.png",
  "url": "https://bun.sh",
  "siteName": "Bun"
}

If you get a similar response, the API is working and you can proceed to deploy it to Cloudflare Workers.

Deploying to Cloudflare Workers

Set up Wrangler: If you don’t have Wrangler installed, do so with:

npm install -g wrangler

Then, log in:

wrangler login

Deploy the API: Run:

wrangler deploy

This will publish your API to Cloudflare Workers and provide a public URL.

Integrating with link-prevue

In your Vue project, install the component:

bun add link-prevue

Then, import and use the component in your app, setting the api-url prop to point to your deployed API:

import LinkPrevue from 'link-prevue';

<LinkPrevue url="https://bun.sh/" api-url="https://<your-worker>.workers.dev/preview" />

The api-url prop lets you define the API endpoint that will generate the link preview. This way, your component will use your own API instead of the default public one.

Final considerations

Make sure your API is accessible and configured to accept requests from your frontend.
You can customize the response and headers as needed.
Cloudflare Workers offer scalability and low latency, ideal for this kind of service.

With these steps, you’ll have an integration between link-prevue and an external API deployed on Cloudflare Workers. If you have questions or want to contribute improvements, check out the repositories and get involved.