Using Inline Social Embeds in Nuxt Content Blog Starter

In the rapidly evolving world of web development, providing engaging and interactive content is crucial. Nuxt.js, a powerful Vue.js framework, offers an excellent platform for building robust and dynamic applications. In this blog post, we'll delve into how to enrich your Nuxt content blog with inline social embeds. This feature is not only a great way to enhance user engagement but also a step towards making your content more dynamic and interactive. We are excited to announce that this functionality will soon be extracted into a Nuxt module, making it widely accessible for everyone to benefit from.

Inline Social Media Embeds

We created a universal component that can be used to embed social media content from a variety of platforms. The component is called inline-social and it takes two primary parameters: src and platform. The src parameter is the url of the social media content you want to embed. The platform parameter is the name of the social media platform you want to embed. The following platforms are currently supported: youtube, vimeo, instagram, twitter, github, and linkedin.

Youtube Video

Embedding Youtube videos is a great way to add dynamic content to your blog:

::inline-social
---
social: 
  src: https://youtu.be/wpeRn8hsG5A?si=Co2vWfGa9L6QcTRN
  platform: youtube
  caption: This is a caption for the video testing to see how it shows up
---
::

Vimeo Video

Similarly, for Vimeo videos, the embedding process remains quite similar:

::inline-social
---
social: 
  src: https://vimeo.com/524933864
  platform: vimeo
  caption: This is a caption for the video testing to see how it shows up
---
::

Instagram Reel

Embedding Instagram reels can add a dynamic element to your content:

::inline-social
---
social: 
  src: https://www.instagram.com/reel/C2uQ4lWRu7r/?utm_source=ig_web_copy_link
  platform: instagram
---
::

Instagram Post

Embedding Instagram posts is just as straightforward:

::inline-social
---
social: 
  src: https://www.instagram.com/p/C2hyDvuIA_q/?utm_source=ig_web_copy_link
  platform: instagram
---
::

Twitter Post

Twitter posts can also be embedded to enhance the relevance and timeliness of your content:

::inline-social
---
social: 
  src: https://twitter.com/nuxt_js/status/1751560872797876431
  platform: twitter
---
::

Twitter Video

Similarly, Twitter videos can be embedded:

::inline-social
---
social: 
  src: https://twitter.com/productdevbook/status/1752214532854817229
  platform: twitter
---
::

LinkedIn Post

Lastly, LinkedIn posts can add a professional touch to your blog:

::inline-social
---
social: 
  src: https://www.linkedin.com/posts/vivekanandasinha_leadership-teambuilding-careeradvice-activity-7157562951372079104-udd6?utm_source=share&utm_medium=member_desktop
  platform: linkedin
---
::