how to add Twitter embed script in single post?

[moebiusmania]

Is your feature request related to a problem? Please describe

It's a question about something that looks undocumented so far.

As title I would like to add a Twitter embed script ( the <script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script> one) on a post specific basis rather than globally in the main app file.

Describe the solution you'd like

By looking around the web I've found something like adding this to the Frontmatter of the post:

head.script:
  - src: "https://platform.twitter.com/widgets.js"
    async: true
    charSet: "utf-8"

I would really like this solution, but it's not working, no new script tag has been added in the document

Describe alternatives you've considered

I would like to avoid creating a specific custom Vue component, but if that is the only way I will stick with it.

I've also tried adding the script tag as regular HTML in the markdown file but I guess some form of sanitization removing it, and it would make sense doing so.

---

there is a "best practice" solution for this or am I doing something wrong with my approach? thanks in advance for feedbacks

PS: nuxt-content (and Nuxt overall) is the best DX that I had in years, I'm really enjoying building small personal stuff with simplicity and speed (in the good way) and not waste time in mindless boilerplate just for the sake of writing more code like it happens on most of React-based tools/libs. So big shoutout to the dev team here. hoping to be able to use this also at work.

[ManasMadrecha]

In markdown, try adding this. I haven't tried it myself, so just a suggestion. Let me know if it works.

<component is="script" async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></component>

If it does not work, then creating a specific custom Vue component is the way to go. 🤷🏻

---

Or in the Module's afterParse hook, you can convert any such component element to an element with is tag. This way, you won't have to create a Vue component, but can bypass any sanitization using any HTML you want (not just limited to script).

The above HTML yields this Node (as per Content Module's playground):

    {
        "type": "element",
        "tag": "component",
        "props": {
          "is": "script",
          "async": true,
          "src": "https://platform.twitter.com/widgets.js",
          "charSet": "utf-8"
        },
        "children": []
      }

So, in the afterParse hook, you change the Node with tag: component and props.is: <anything> to tag: <anything>

[moebiusmania]

hi @ManasMadrecha I've tried the first solution of adding <component> on markdown, but that it's not working and throwing some warnings in console. Thanks anyway for the help

[LoganTann]

Edit 2024 : Please note that this solution does not seems to work as of today.

Hi @moebiusmania

If the widget type is a timeline profile, I suggest including your embed via an iframe (I haven't found any reliable documentation on it, but it works).

<!-- Where TwitterDev is the account you want to create the widget for -->
<iframe
  src="https://syndication.twitter.com/srv/timeline-profile/screen-name/TwitterDev?dnt=true&embedId=twitter-widget-0&showHeader=false&showReplies=false&theme=light&transparent=true&maxHeight=470px"
  scrolling="no"
></iframe>

Or as you suggested, by creating a proper component in your main codebase and including it in your markdown file.

[TechWatching]

I'm curious about how people are solving this issue. I have tweets in several blog posts and I'm thinking about creating a custom vue component that use the Twitter Embed API, but I don't want to reinvent the wheel.

[briancaffey]

@moebiusmania I recently updated my blog from Nuxt 2 to Nuxt 3 and it broke some twitter embeds that were working before (directly copy and pasting the embed code into a Nuxt Content Markdown file). Here's how I got it working for now:

• Create a new global component in components/content (example)
• As @ManasMadrecha mentioned, convert the <script> tag in the embed code to a <component> tag and include the :is="'script'" (ES Lint will throw an error if you do not have the v-bind:is)
• Include the component in your Markdown like this: <MyComponent></MyComponent> (<MyComponent /> will not work, for me it would not render and also cut off the rest of the content from the page)
• The same process works for video embeds from 𝕏

This post on my GitHub Pages blog uses an embedded tweet. Hopefully that helps!

Please let me know if anyone has a better way. I tried embedding this directly in the Markdown without using a global component but it wouldn't render the embedded tweet, it would just show some of the text and links from the tweet embed code.