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

# Configure the Vue.js SDK (video tutorial)

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

## Overview

Learn how to install and configure the [Cloudinary Vue.js SDK](vue_integration) in your Vue.js environment. 

## 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 Cloudinary Vue.js SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=05 :player=cld} | The [Cloudinary Vue.js SDK](vue_integration) provides transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Vue.js application.
|

### Install the Vue.js SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=18 :player=cld} | To install the Vue.js SDK, in a terminal run:
|

```
npm install @cloudinary/url-gen @cloudinary/vue
```

### Import AdvancedImage and Cloudinary into your project
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=33 :player=cld} | The `AdvancedImage` component displays Cloudinary images in your app. To use the `AdvancedImage` component, add the following import statements into your project:
|

```vue
<script>
import { AdvancedImage } from "@cloudinary/vue";
import { Cloudinary } from "@cloudinary/url-gen";
</script>
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=17 :player=cld} | To configure the SDK for your product environment, you can set your [cloud name](product_environment_settings#api_keys) (in addition to other [configuration parameters](cloudinary_sdks#configuration_parameters)) in a new instance of `Cloudinary`, like this:
|

```vue
<script>
...
const cld = new Cloudinary({
  cloud: {
    cloudName: "demo",
  },
});
</script>
```

### Build your Cloudinary image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=55 :player=cld} | Use the `image` method of the `Cloudinary` instance to reference an image in your product environment. The method takes a [public ID](cloudinary_glossary#public_id) as a parameter and returns a `CloudinaryImage` object. Pass this to the `AdvancedImage` component to display the image in your app.  For example:
|

```vue
<script>
...
const myImg = cld.image("docs/models");
</script>

<template>
  <AdvancedImage :cldImg="myImg" />
</template>
```

### Create a parameterized component 
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=18 :player=cld} | You can create a generic image component for your app, which takes a public ID as a parameter, by moving all the code to a component (in this case, **CloudImage.vue**) and importing the component to **App.vue**, making the component generic by defining props:
|

CloudImage.vue

```vue
<script>
...
const props = defineProps({
  imageName: String,
})

const myImg = cld.image(props.imageName);
</script>
```

App.vue

```vue
<script>
import CloudImage from "./components/CloudImage.vue";
</script>

<template>
  <CloudImage imageName="docs/models" />
</template>
```

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

> * Follow the [Vue.js SDK quick start](vue_quick_start) to get up and running in five minutes.

> * Find out how to [upload files to Cloudinary using Vue.js](vue_image_and_video_upload).

> * Learn how to transform your [images](vue_image_transformations) and [videos](vue_video_transformations) using the Vue.js SDK.

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

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Using the Nuxt Image Component
    Deliver images using the Nuxt Image component 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

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