> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Deliver images with the Nuxt Image component (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nuxt-nuxt-image-provider

## Overview

Learn how to deliver Cloudinary images in your Nuxt application using the [Nuxt Image component](https://image.nuxt.com/providers/cloudinary). 

## Video tutorial

  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.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### The Nuxt Image component
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=05 :player=cld} | [NuxtImage](https://image.nuxt.com/) provides an integration with Cloudinary that allows you to deliver your Cloudinary images in your Nuxt app. 
|

### Get started
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=30 :player=cld} | First, install `@nuxt/image-edge`:
|

```
npm i -D @nuxt/image-edge
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=36 :player=cld} | 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](https://console.cloudinary.com/app/home/dashboard).
|

```javascript
export default defineNuxtConfig({
  modules: ['@nuxt/image-edge'],
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/',
    },
  },
});
```

### Add an image to your app
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=12 :player=cld} | 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](https://image.nuxt.com/usage/nuxt-img#props), such as the width and height, as well as specific [Cloudinary modifiers](https://image.nuxt.com/providers/cloudinary#cloudinary-modifiers) to transform the image.
|

## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about [image](image_transformations) and [video](video_manipulation_and_delivery) transformations.

#### 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 
  

&nbsp;

&nbsp;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.
&nbsp;