Package Exports

static-vue-tweet
static-vue-tweet/vite.config.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (static-vue-tweet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

static-vue-tweet

A statically-rendered tweet component using Vue 3, Scss, and Vercel's API. This project wouldn't exist without https://static-tweet.vercel.app/.

The problem

The official tweet embed provides you with a <blockquote> element containing the tweet text and a third-party script to replace it with an <iframe> containing a better UI.

This method of embedding tweets has some disadvantages:

Initial page load does not display the tweets.
The tweet widget JS loads after pageload.
An iframe is initialized, kicking off more JS. The page content shifts around to make room.
A whole webview is rendered inside the iframe. More page layout shift.

The solution

A good solution would be to get the tweet data from the API then use plain HTML & CSS to display it, which gives you the best lighthouse scores.

Install

npm install static-vue-tweet

Quickstart

import { VueTweet } from "static-vue-tweet";

<Tweet id="1656183755000762373" />;