Last updated: Feb-25-2026
Overview
Learn how to deliver Cloudinary images in your Nuxt application using the Nuxt Image component.
This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.
You can find the code from this tutorial in GitHub.
Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
The Nuxt Image component
 0:05 |
NuxtImage provides an integration with Cloudinary that allows you to deliver your Cloudinary images in your Nuxt app. |
Get started
| 0:30 |
First, install @nuxt/image-edge: |
Configure Cloudinary
| 0:36 |
In nuxt.config.ts, add the modules section to allow the image-edge module to be available during build, and the image section for the Cloudinary baseURL parameter. Make sure to use your cloud name in the URL. You can find your Cloud name in the Dashboard. |
Add an image to your app
| 1:12 |
To display an image in your Nuxt app, use the <nuxt-img> component, setting the provider to cloudinary. Set src to the delivery URL of the image you want to deliver from Cloudinary, but remove the part that's covered by the base URL. You can set other props, such as the width and height, as well as specific Cloudinary modifiers to transform the image. |
Keep learning
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Learn more about image and video transformations.
If you like this, you might also like...
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
✔️ Feedback sent!
✖️
Error
Unfortunately there's been an error sending your feedback.