> ## 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. # Upload assets in a Vue.js app (video tutorial) [githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/vue-upload-widget-preset ## Overview Add asset upload capabilities to your Vue.js app using the Cloudinary [Upload widget](upload_widget). Learn how to install and configure the Upload widget including how to make the widget work with the intricacies of a Vue.js application. ## 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. ### Introduction to the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=0 :sec=05 :player=cld} | Cloudinary has many ways to upload files to your Media Library to take advantage of Cloudinary's extensive features and capabilities. In a Vue.js app you can use the Upload widget as a quick and easy way to provide a full upload experience. | ### Add the Upload widget script to your Vue.js app {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=0 :sec=48 :player=cld} | Start with an empty Vue.js application and add the Upload widget JavaScript file. Paste the code, which you can find in the [Upload widget documentation](upload_widget#unsigned_uploads), into the `` section of **index.html**. | ### Add a button to open the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=1 :sec=38 :player=cld} | In **App.vue**, add a button that calls a function `openUploadWidget()` when it's clicked. Create that function, and inside it, call `widget.open();`. | ### Initialize the Upload widget {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=1 :sec=59 :player=cld} | Use the `createUploadWidget` method to initialize the widget. Pass in your cloud name (which you can find in the Console Dashboard) and an unsigned upload preset. | ### Create an upload preset {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=2 :sec=46 :player=cld} | In your Cloudinary Console, navigate to **Settings > Upload > Upload presets** to create a new unsigned [upload preset](upload_presets). | ### Create a callback function {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=3 :sec=30 :player=cld} | Create a new callback function to handle the response from the Upload widget. | ### Test it out {table:class=tutorial-bullets}| | | --- | --- | |{videotime:id=media :min=3 :sec=40 :player=cld} | Click the button to open the Upload widget and upload a file to your Media Library. You can open the uploaded image by copying the `secure_url` parameter from the log and pasting it in a browser. | ## Keep learning > **READING**: > > * Read our Upload widget [guide](upload_widget) and [reference](upload_widget_reference), covering every available parameter option. > * Take a look at our [Vue.js SDK](vue_integration) to learn how to transform your [images](vue_image_transformations) and [videos](vue_video_transformations). > * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary). #### If you like this, you might also like... Generate Upload Signature Generate a timestamp and signature for a signed upload Upload Widget Embed an Upload Widget in your site Upload with the CLI Apply background removal to images on upload    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.