Last updated: Aug-06-2025
We've created some sample projects to get you started with integrating Cloudinary into your Vue.js application.
Photo AlbumAdhering to Vue.js best practices, the Photo Album app demonstrates uploading and displaying images. See how to upload images to your product environment using the Upload widget and the REST API, automatically tagging 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 being used to deliver a square thumbnail image, automatically focused on the most interesting part of the image, and automatically optimized for format and quality. The placeholder plugin is used to load a low quality image initially, until the full image is downloaded, preserving the layout.
See all the image and video 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 to 200 x 300 pixels, automatically focusing on the most interesting part of the image.
Vue.js pluginsThe 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:
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.
âï¸ Feedback sent!
âï¸Â  ErrorUnfortunately there's been an error sending your feedback.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4