Programmable Media

Deliver images with the Nuxt Image component (video tutorial)

Last updated: Sep-12-2024

Overview

Learn how to deliver Cloudinary images in your Nuxt application using the Nuxt Image component.

Video tutorial


View the code
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

Jump to this spot in the video  0:05 NuxtImage provides an integration with Cloudinary that allows you to deliver your Cloudinary images in your Nuxt app.

Get started

Jump to this spot in the video  0:30 First, install @nuxt/image-edge:

Configure Cloudinary

Jump to this spot in the video  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

Jump to this spot in the video  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

Related topics

If you like this, you might also like...

Optimization Tips
Tips for delivering optimized images
Named Transformations
Simplify & standardize complex delivery URLs
Configure the Vue.js SDK
Install and configure the Cloudinary Vue.js SDK

 

Cloudinary Academy

 

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!

Rate this page: