How to use Twitter embed tweet in Vue

Overview

Before starting to tell, you have to install vueuse package in your project. If you are working with Nuxt 3, you don't need to install it because it's already installed.

Example codes

All examples are along with following script code.

vue

<script setup lang="ts">
useHead({
  script: [
    {
      async: true,
      src: 'https://platform.twitter.com/widgets.js',
    }
  ]
})
</script>

Cards

vue

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
  Sunsets don&#39;t get much better than this one over 
  <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>.
  <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a>
  <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a>
  <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) 
  <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a>
</blockquote>

Timeline

vue

<a
  class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
>
Loading...
</a>

Use twitter-timeline class.

Buttons

There are 5 styles of button. We will look around all buttons with examples.

Share Button
Follow Button
Mention Button
Hashtag Button
Message Button

vue

<a 
  class="twitter-share-button"
  href="https://twitter.com/intent/tweet"
>
  Tweet
</a>

Use twitter-share-button class.

Follow

vue

<a 
  class="twitter-follow-button" 
  href="https://twitter.com/TwitterDev"
>
  Follow @TwitterDev
</a>

Use twitter-follow-button class.

Hashtag

vue

<a 
  href="https://twitter.com/intent/tweet?button_hashtag=test&ref_src=twsrc%5Etfw" 
  class="twitter-hashtag-button"
>
  Tweet #test
</a>

Add tag=tagname in the href.
Use twitter-hashtag-button class.

Mention

vue

<a 
  href="https://twitter.com/intent/tweet?screen_name=username&ref_src=twsrc%5Etfw" 
  class="twitter-mention-button"
>
  Tweet to @username
</a>

Add screen_name=username in the href.
Use twitter-mention-button class.

DM (Direct message)

vue

<a 
  href="https://twitter.com/messages/compose?recipient_id=3805104374"
  class="twitter-dm-button" 
  data-screen-name="@username"
>
  Message @username
</a>

Add data-screen-name attribute with @username.
Use twitter-dm-button class.

Options

Options have attribute data-* prefix. Change * to option.

Cards

Options should be in attributes of blockquoteHTML tag

Option	Description
conversation	`none`, prevent todisaplay parent tweet
cards	`hidden`, prevent expanded content display
tweet-limit	Limit displaying maximum number of tweet

Timeline

Option	Description
width	Width
height	Height
chrome	`noheader`, `nofooter`, `noborders`, `noscrollbar`, `transparent`
tweet-limit	Limit displaying maximum number of tweet

Buttons

Option	Description
size	`large`, Change size of button
show-screen-name	It pass boolean. hide username if it's false

Helper

There is a website that helps you to generate embed tweet. Visit the twitter-publish to generate embed tweet. You can add all types of embed tweet.

ref

Twitter Developer Platform