Optimized images and videos in Nuxt with Cloudinary 🚀

#nuxt #performance #javascript #vue

Hey there!

I recently published a new version of Cloudinary module for Nuxt and that is also why I decided to write an article about the recent changes.

You may think that the module only comes with an optimized image component but the reality is that it comes with several cool features out of the box!

So, in this article, I will be talking about:

Video Player
Product Gallery
Open Graph Image

If you would like to read more about using CldImage component to deliver optimized images in Nuxt apps, check out my other article here

Enjoy!

Video Player

With one of the earlier versions, we have added a support for embedding videos in your Nuxt application in an easy way.

This approach allows you to add a video player to your Nuxt website by just copying these lines:

<CldVideoPlayer width="1920" height="1080" src="<Public ID>" />

Which will result in following video element appearing on your page:

But you can also customize the video player to match your needs better like following:

<template>
  <CldVideoPlayer
    width="1620"
    height="1080"
    src="videos/mountain-stars"
    :colors="colors"
    fontFace="Source Serif Pro"
  />
</template>

<script setup lang="ts">
  const colors = {
    accent: "#ff0000",
    base: "#00ff00",
    text: "#0000ff",
  };
</script>

And this will result in:

Product Gallery

This is quite a new component that was added to the list and it is another one from the amazing Cloudinary widgets.

CldProductGallery allows you to easily embed gallery of product images that you may want to have in your e-commerce website.

To use it, just copy the code below:

<script setup lang="ts">
const mediaAssets = [
  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
];
</script>

<template>
  <CldProductGallery :media-assets="mediaAssets" />
</template>

And it will result in following product gallery element appearing on your page:

For all available options, check out full documentation

Open Graph Image

Generating Open Graph images (popularily used for social media pages like twitter or facebook) requires some work. And with Nuxt Cloudinary, it only requires you to use following one liner:

<CldOgImage src="cld-sample-2" />

CldOgImage does not render an img tag, meaning it can't be visually embedded on a page. To see the output, please check out the raw HTML of your website which should look more or less like this:

<meta content="https://res.cloudinary.com/nuxt-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_jpg/q_auto/cld-sample-2?_a=BBDAACAD0" property="og:image">
<meta content="https://res.cloudinary.com/nuxt-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_jpg/q_auto/cld-sample-2?_a=BBDAACAD0" property="og:image:secure_url">
<meta content="1200" property="og:image:width">
<meta content="627" property="og:image:height">
<meta content=" " property="twitter:title" />
<meta content="summary_large_image" property="twitter:card">
<meta content="https://res.cloudinary.com/nuxt-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_webp/q_auto/cld-sample-2?_a=BBDAACAD0" property="twitter:image">

For all available options, check out full documentation

Summary

Nicely done! You now understand how to use Nuxt Cloudinary goodies to accelerate development time and deliver optimized images and videos for your website.

Check out the official documentation https://cloudinary.nuxtjs.org/ for all examples.

If you like the experience, do not forget to star the project on GitHub - https://github.com/nuxt-modules/cloudinary

Take care and see you next time!