Nuxt

Nuxt

Installation

Follow the installation docs in the Introduction.

Add the following config to nuxt.config.ts:

build: {
  transpile: ['vue-better-tweet'],
},

Usage

In any component, import Tweet from vue-better-tweet and use it like so:

<script setup lang="ts">
import { Tweet } from 'vue-better-tweet'
</script>
 
<template>
  <Tweet id="1628832338187636740" />
</template>

Tweet works differently depending on where it's used. If it's used in Nuxt on the server it will fetch the tweet in the server. If it's used in the client it will fetch the tweet in the client with SWRV (opens in a new tab).

You can learn more about Tweet in the Twitter theme docs. And you can learn more about the usage in Running the test app.

SSR only usage

Create a new file

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

Use this component in you app

/app/pages/index.vue
<template>
  <TweetSSR id="1683920951807971329">
</template>

Enabling cache

It's recommended to enable cache for the Twitter API if you intend to go to production. This is how you can do it with defineCachedFunction (opens in a new tab):

api/tweet/cache/[id].ts
import { getTweet } from 'vue-better-tweet/api'
 
export default defineCachedEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
 
  if (!id) {
    throw createError("Missing id")
  }
 
  return await getTweet(id);
}, { maxAge: 3600 * 24 });
pages/tweet/[tweet].vue
<script setup lang="ts"> 
import { TweetNotFound, EmbeddedTweet } from "vue-better-tweet"
 
const route = useRoute();
const tweetId = computed(() => route.params.tweet)
 
const { data: tweet, error } = await useAsyncData(
  `tweet-${tweetId}`,
  () => $fetch(`api/tweet/cache/${tweetId.value}`),
  { server: true }
)
</script>
 
<template>
  <div>
    <TweetNotFound v-if="error || !tweet" />
    <EmbeddedTweet v-else :tweet="tweet" />
  </div>
</template>

This can prevent getting your server IPs rate limited if they are making too many requests to the Twitter API.

Advanced usage

Manual data fetching

You can use the getTweet function from vue-better-tweet/api to fetch the tweet manually. This is useful for SSG pages and for other Nuxt data fetching methods (opens in a new tab) in the pages directory.

For example, using useAsyncData in pages/tweed/[tweetId].vue to fetch the tweet and send it as props to the page component:

<script setup lang="ts">
import { getTweet, type Tweet } from 'vue-better-tweet/api'
import { EmbeddedTweet, TweetSkeleton } from 'vue-better-tweet'
 
const route = useRoute()
const tweetId = route.params.tweet as string
 
const { data: tweet, pending, error } = await useAsyncData<Tweet | null>(
  `tweet:${tweetId}`,
  () => getTweet(tweetId),
  {
    server: true, // runs on server during SSR/SSG
  }
)
 
if (error.value || !tweet.value) {
  throw createError({ statusCode: 404, statusMessage: 'Tweet not found' })
}
</script>
 
<template>
  <TweetSkeleton v-if="pending" />
  <EmbeddedTweet v-else :tweet="tweet!" />
</template>

Adding @nuxt/image

Add the domain URLs from Twitter to image.domain (opens in a new tab) in nuxt.config.ts:

image: {
  domains: ['pbs.twimg.com', 'abs.twimg.com']
},

In tweet-components.ts or elsewhere, import the NuxtImage component from @nuxt/image and use it to define custom image components for the tweet:

import NuxtImage from '#components'
import type { TwitterComponents } from 'vue-better-tweet'
import { defineComponent, h } from 'vue'
 
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" })
    },
  }),
}

Then pass the components prop to Tweet:

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

Running the test app

Clone the vue-better-tweet (opens in a new tab) repository and then run the following command:

pnpm install && pnpm dev --filter=nuxt-app...

The app will be up and running at http://localhost:3001 (opens in a new tab) for the Nuxt app example (opens in a new tab).

The app shows the usage of vue-better-tweet in different scenarios:

The source code for vue-better-tweet is imported from packages/vue-better-tweet (opens in a new tab) and any changes you make to it will be reflected in the app immediately.

IntroductionVite