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

# Vue.js sample projects


We've created some sample projects to get you started with integrating Cloudinary into your Vue.js application. 
> **TIP**: Check out our collection of [Vue.js code explorers](code_explorers) too!

## Photo Album

Adhering to Vue.js best practices, the [Photo Album app](https://github.com/cloudinary-devs/vue-photo-album) demonstrates uploading and displaying images. See how to upload images to your product environment using the [Upload widget](upload_widget) and the [REST API](client_side_uploading#direct_call_to_the_api), automatically [tagging](tags) them as they're uploaded. Then see how each of the tagged images is transformed on the fly and displayed on the site.

This is the Photo Album app in action:

Here's an excerpt from the code showing the [AdvancedImage component](vue_image_transformations#image_transformations_with_vue) being used to deliver a [square thumbnail image](vue_image_transformations#resizing_and_cropping), automatically focused on the most interesting part of the image, and automatically [optimized for format and quality](vue_image_transformations#image_optimizations). The [placeholder plugin](vue_image_transformations#image_placeholders) is used to load a low quality image initially, until the full image is downloaded, preserving the layout.

CldImage.vue

```vue
<script setup>
import { AdvancedImage, placeholder } from '@cloudinary/vue'
import { Cloudinary } from '@cloudinary/url-gen'
import { thumbnail } from '@cloudinary/url-gen/actions/resize'
import { autoGravity } from '@cloudinary/url-gen/qualifiers/gravity'
import { format, quality } from '@cloudinary/url-gen/actions/delivery'

const props = defineProps({
  publicId: {
    type: String,
    required: true
  }
})

const cld = new Cloudinary({
  cloud: {
    cloudName: import.meta.env.VITE_CLOUD_NAME
  }
})
const myImage = cld
  .image(props.publicId)
  .resize(thumbnail().width(300).height(300).gravity(autoGravity()))
  .delivery(format('auto'))
  .delivery(quality('auto'))
const plugins = [placeholder()]
</script>

<template>
  <AdvancedImage
    :cldImg="myImage"
    style="max-width: 100%"
    :plugins="plugins"
    className="rounded-lg shadow-lg"
  />
</template>

```

> **See the full code**:
>
> * [Explore the Photo Album app on GitHub](https://github.com/cloudinary-devs/vue-photo-album).

## Image and video transformations

See all the [image](vue_image_transformations) and [video](vue_video_transformations) transformations that are shown in the Vue.js SDK guide.

This is the image and video transformations app in action:

Here's an excerpt from the code showing an image being [cropped](vue_image_transformations#resizing_and_cropping) to 200 x 300 pixels, automatically focusing on the most interesting part of the image.

AutoGravity.vue

```vue

<script setup>
import { AdvancedImage } from '@cloudinary/vue';
import { Cloudinary } from '@cloudinary/url-gen';
import { fill } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo',
  },
});

// Use the image with public ID, 'basketball_in_net'.
const myImg = cld.image('basketball_in_net');

// Apply the transformation.
myImg.resize(fill().width(200).height(300).gravity(autoGravity()));

</script>

<template>
  <div class="App-body">
    <h3>Crop an image to keep the most interesting part, as shown in<br><a class="App-link" href="https://cloudinary.com/documentation/vue_image_transformations#resizing_and_cropping" target="_blank">Resizing and cropping</a></h3>
    <AdvancedImage :cldImg="myImg" />
  </div>
</template>

```

> **See the full code**:
>
> * [Explore the image and video transformations app on GitHub](https://github.com/cloudinary-devs/cld-vue-sdk-docs-examples).

> * [Open the code explorer](https://stackblitz.com/edit/github-wuagwnhx?file=src%2FApp.vue,src%2Fviews%2FImages.vue,src%2Fcomponents%2FQuickStart.vue).

## Vue.js plugins

The Cloudinary Vue.js library provides plugins to render the media on your site in the optimal way and improve your user's experience.  This app demonstrates how to implement:

* [Image accessibility](vue_image_transformations#image_accessibility) to make your images more accessible to your users with visual disabilities.
* [Responsive images](vue_image_transformations#responsive_images) to resize your images automatically based on the viewport size.
* [Lazy loading](vue_image_transformations#lazy_loading) to delay loading images if they are not yet visible on the screen.
* [Image placeholders](vue_image_transformations#image_placeholders) to display a lightweight version of an image while the target image is downloading.

This is the Vue.js plugins app in action: 

Here's an excerpt from the code showing images being rendered with the lazy load and placeholder plugins.

LazyLoadPlaceholder.vue

```vue

<script setup>
import { AdvancedImage, lazyload, placeholder } from '@cloudinary/vue';
import { Cloudinary } from '@cloudinary/url-gen';

// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo',
  },
});

// Instantiate a CloudinaryImage object for the image with the public ID, 'oil'.
const myImage = cld.image('oil');

// Define plugins for lazyloading and placeholder.
const plugins = [lazyload(), placeholder()];

</script>

<template>
  <div class="App-body">
    <h3>Using lazyload and placeholder</h3>
    <p>Scroll down to see image lazy load with placeholder</p>
    <div class="bigspacer"></div>
    <AdvancedImage :cldImg="myImage" :plugins="plugins" />
  </div>
</template>


```

> **See the full code**:
>
> * [Explore the Vue.js plugins app on GitHub](https://github.com/cloudinary-devs/cld-vue-plugins).

> * [Open the code explorer](https://stackblitz.com/edit/github-kj54yiaw?file=src%2FApp.vue,src%2Fcomponents%2FAccessibility.vue).