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.