Last updated: Apr-08-2023
This quick start is intended to let you quickly try using several common Cloudinary features. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.
You can perform this quick start in a code sandbox or in a clean project in the dev environment of your choice.
You can also view the completed code of this quick start in a GitHub repo and code explorer.
You may also find our Glossary helpful to understand Cloudinary-specific terminology.
Two libraries are required:
- frontend-frameworks for rendering media using the Vue.js framework.
- js-url-gen for building transformations.
To perform this quick start, you'll need:
- A Cloudinary account. If you don't have one yet, you can quickly register for free.
- Your product environment credentials. You can find your credentials in the Dashboard page of your Cloudinary Console.
- A working Vue.js development environment with a supported version of Vue.js.
Install the required packages using the NPM package manager:
Create a basic Vue.js app, and a new Vue.js component (called QuickStart.vue here). Copy and paste the following:
If you changed the cloud name in the previous step, you need to use an image in your Cloudinary product environment for the next steps. All new accounts come with sample images, so you can use one of those, or, if you want to use the same image as us, save this image locally, then for the purposes of this quick start, the simplest way to upload it is as follows:
- Log into your Cloudinary Console.
- Select Media Library from the left panel.
- Click Upload to open the Upload Widget, then click Advanced and type "docs/models" into the Public ID field.
- Click Browse to find the image to upload. Once uploaded, you can select Recent uploads from the Advanced Search drop-down at the top left of the Media Library to see your uploaded image.
In the next step, you'll need the public ID of whichever image you use (in our case, we set the public ID on upload to
docs/models). If using one of the sample images, you can double-click the image in your Media Library and copy the public ID (between the version number and the extension):
Copy and paste these import statements below the existing ones:
Copy and paste the following code between the script tags, under the configuration code:
docs/models, make sure to update your code for the remainder of this quick start with the public ID of the image you're delivering.
Below the script tags, copy and paste the following code to display the image:
Set up App.vue to display the
QuickStart component, using the following code:
Run the code to see the transformed image.
Here's the full example:
This code is also available in GitHub.
- Understand the architecture of the Vue.js SDK and get a more detailed overview of the libraries.
- Find out more about transforming images using
- Learn about transforming videos using
- Discover ways to improve load times and make your images responsive and accessible using plugins.