API Reference

`Tweet`

import { Tweet } from 'vue-better-tweet'

<Tweet id="2014481742875521242" />

Fetches and renders the tweet. It accepts the following props:

id - string: the tweet ID. For example in https://twitter.com/chibicode/status/2014481742875521242 the tweet ID is 2014481742875521242. This is the only required prop.
apiUrl - string: the API URL to fetch the tweet from when using the tweet client-side with SWR. Defaults to https://vue-better-tweet.vercel.app/api/tweet/:id.
fallback - Slot: The fallback component to render while the tweet is loading. Defaults to TweetSkeleton.
onError - (error?: any) => any: The returned error will be sent to the TweetNotFound component.
components - TwitterComponents: Components to replace the default tweet components. See the custom tweet components section for more details.
fetchOptions - RequestInit: options to pass to fetch (opens in a new tab).

If the environment where Tweet is used does not support Nuxt Server Components then it will work with SWRV (opens in a new tab) instead and the tweet will be fetched from https://vue-better-tweet.vercel.app/api/tweet/:id, which is CORS friendly.

We highly recommend adding your own API route to fetch the tweet in production (as we cannot guarantee our IP will not get limited). You can do it by using the apiUrl prop:

<Tweet :apiUrl="`/api/tweet/${id}`" />

Note: apiUrl does nothing if the Tweet is rendered in a server component because it can fetch directly from Twitter's CDN.

Here's a good example of how to setup your own API route:

server/api/tweet/[tweet].ts

import { getTweet } from 'vue-better-tweet/api'
 
export default defineEventHandler(async (event) => {
  const tweetId = getQuery(event).tweet
 
  if (event.method !== 'GET' || typeof tweetId !== 'string') {
    setResponseStatus(event, 400)
    return { error: 'Bad Request.' }
  }
 
  try {
    const tweet = await getTweet(tweetId)
    setResponseStatus(event, tweet ? 200 : 404)
    return { data: tweet ?? null }
  } catch (error: any) {
    console.error(error)
    setResponseStatus(event, 400)
    return { error: error?.message ?? 'Bad request.' }
  }
})

Something similar can be done with Nuxt server routes or Nitro handlers.

`EmbeddedTweet`

import { EmbeddedTweet } from 'vue-better-tweet'

Renders a tweet. It accepts the following props:

tweet - Tweet: the tweet data, as returned by getTweet. Required.
components - TwitterComponents: Components to replace the default tweet components. See the custom tweet components section for more details.

`TweetSkeleton`

import { TweetSkeleton } from 'vue-better-tweet'

A tweet skeleton useful for loading states.

`TweetNotFound`

import { TweetNotFound } from 'vue-better-tweet'

A tweet not found component. It accepts the following props:

error - any: the error that was thrown when fetching the tweet. Not required.

Custom tweet components

Default components used by Tweet and EmbeddedTweet can be replaced by passing a components prop. It extends the TwitterComponents type exported from vue-better-tweet:

type TwitterComponents = {
  TweetNotFound?: DefineComponent<{ error?: unknown }>
  AvatarImg?: DefineComponent<AvatarImgProps>
  MediaImg?: DefineComponent<MediaImgProps>
}

For example, to replace the default img tag used for the avatar and media with NuxtImg you can do the following:

import { defineComponent, h } from 'vue'
import { NuxtImg } from '#components'
import type { TwitterComponents } from 'vue-better-tweet'
 
export const components: TwitterComponents = {
  AvatarImg: defineComponent({
    inheritAttrs: false,
    setup(_, { attrs }) {
      return () => h(NuxtImg, {...attrs, quality: 20 })
    },
  }),
  MediaImg: defineComponent({
    inheritAttrs: false,
    setup(_, { attrs }) {
      return () => h(NuxtImg, { ...attrs, quality: 10, sizes: "100px" })
    },
  }),
}

And then pass the components to Tweet or EmbeddedTweet:

<script setup lang="ts">
import { Tweet } from 'vue-better-tweet'
import { components } from './tweet-components'
 
defineProps<{ id: string }>()
</script>
 
<template>
  <Tweet :id="id" :components="components" />
</template>

Twitter Theme Advanced