Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1

4


Getting a List of Files Using the


Dropbox API


Over the next few chapters, we are going to be building a Vue-based Dropbox browser.
This app will take your Dropbox API key and allow you to navigate to folders and


download files. You will learn about interacting with an API within a Vue app, the Vue life
cycle hooks, including the created() method, and finally we will introduce a library


called Vuex to handle the caching and state of the app. The app will have shareable URLs


and retrieve the contents of the folder passed in via the # URL parameter.


This kind of app would be useful if you wanted to give users access to the contents of your


Dropbox without giving out a username and password. Be warned, however, a tech-savvy
user could find your API key in the code and abuse it, so don't publish this code to the


World Wide Web.


This chapter is going to cover:


Loading and querying the Dropbox API
Listing the directories and files from your Dropbox account
Adding a loading state to your app
Using Vue animations

You will need a Dropbox account to follow these next few chapters. If you don't have one,
sign up and add a few dummy files and folders. The contents of the Dropbox don't matter,


but having folders to navigate through will help with understanding the code.

Free download pdf