Vue Bluesky Feed by evoMark

A Vue3 / Tailwind component for showing Bluesky feeds, sourced from either usernames, search terms or general feeds.

Install

NPM

npm install @evomark/vue-bluesky-feed

Yarn

yarn add @evomark/vue-bluesky-feed

PNPM

pnpm add @evomark/vue-bluesky-feed

Requirements

• Vue 3.5+
• Tailwind
• NodeJS 20+

Setup

EITHER: As part of a Tailwind-powered app

// tailwind.config.js
import blueskyTailwind from "@evomark/vue-bluesky-feed/tailwind";

export default {
    content: [...blueskyTailwind()],
    // ...
};

OR: As part of a non-Tailwind app

// entry-file.js
import "@evomark/vue-bluesky-feed/style";

Vue Component

import { VueBlueskyFeed } from "@evomark/vue-bluesky-feed";

<template>
    <VueBlueskyFeed
        username="evanyou.me"
        limit="5"
        load-more
        link-class="underline text-red-600"
        post-avatar-class="size-14 rounded"
    />
</template>

Usage

Full documentation coming soon, for now, here's the prop types

interface ComponentProps {
    // Generate a feed from a username
    username?: string;
    // Generate a feed by name
    feed?: string;
    // Generate a feed from a search term
    search?: string;
    // Max no. of feed posts per request
    limit?: number;
    linkTarget?: "_self" | "_blank" | "_parent" | "_top";
    // Link to images rather than showing in modal
    linkImage?: boolean;

    // Render a button to load more posts
    loadMore?: boolean;
    // Element to attach the modal to
    attach?: HTMLElement;
    // Use compact mode, where additional content is hidden initially
    compact: boolean;

    class: string;
    loadMoreClass: string;
    modalBackdropClass: string;
    modalCloseButtonClass: string;
    modalClass: string;
    linkClass: string;

    compactToggleClass: string;
    postClass: string;
    postHeaderClass: string;
    postUserLinkClass: string;
    postUsernameClass: string;
    postUserHandleClass: string;
    postTimestampClass: string;
    postAvatarClass: string;
    postVideoClass: string;
    postCardAvatarClass: string;
    postTextContentClass: string;
    postCardClass: string;
    postCardThumbnailClass: string;
    postCardHostClass: string;
    postCardTitleClass: string;
    postCardDescriptionClass: string;
    postReplyClass: string;
    postImageGridClass: string;
    repostClass: string;
    repostTextClass: string;

    loadingPostClass: string;
    loadingPostAvatarClass: string;
    loadingPostHeadlineClass: string;
    // Class for each line of the post when loading
    loadingPostLineClass: string;
    // Number of lines to represent the post in a loading skeleton
    loadingPostLines: number;
}

Roadmap

• The bundle size is currently too large due to @atproto/api dependencies, investigate ways to reduce