Configure the Vue.js SDK (video tutorial)
Last updated: Sep-02-2024
On this page:
Overview
Learn how to install and configure the Cloudinary Vue.js SDK in your Vue.js environment.
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 Cloudinary Vue.js SDK
The Cloudinary Vue.js SDK 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
To install the Vue.js SDK, in a terminal run: | |
Import AdvancedImage and Cloudinary into your project
The AdvancedImage component displays Cloudinary images in your app. To use the AdvancedImage component, add the following import statements into your project: |
|
Configure Cloudinary
To configure the SDK for your product environment, you can set your cloud name (in addition to other configuration parameters) in a new instance of Cloudinary , like this: |
|
Build your Cloudinary image
Use the image method of the Cloudinary instance to reference an image in your product environment. The method takes a 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: |
|
Create a parameterized component
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
App.vue
Keep learning
Related topics
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Follow the Vue.js SDK quick start to get up and running in five minutes.
- Find out how to upload files to Cloudinary using Vue.js.
- Learn how to transform your images and videos using the Vue.js SDK.
If you like this, you might also like...
Optimization Tips
Tips for delivering optimized imagesUsing the Nuxt Image Component
Deliver images using the Nuxt Image componentNamed Transformations
Simplify & standardize complex delivery URLs
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.
✖️