Vue and Firebase: Building a Serverless Single-Page App

What if you could create an interactive application with a fully-featured backend without maintaining a server?

You can! And it's why the term serverless is gaining more popularity. In this course, we take a look at building a modern single-page app with Vue. We'll hook our Vue app up to Firebase for a realtime datastore and user authentication.

To enjoy this course, it's recommended that you have moderate JavaScript experience. Some Vue knowledge won't hurt, either!

View the code for this course on Github.


1. Introduction


Here's a sneak peak at what we'll be building. To follow along, be sure to have Node.js and vue-cli installed.


2. Creating a new app with Vue CLI


Let's get started by creating a new app using vue-cli.


3. File Structure


What does Vue CLI scaffold for us out of the box? Let's walk through some important files and get our bearings before writing our own code.

4. Firebase


We're going to need to communicate with a datastore (and eventually a user authentication service). Let's use Firebase. We'll start by installing the npm module firebase using the command line.

5. Querying Shows


Now that we have Firebase connected to our app, let's query the shows collection that lives inside the Firestore service.

6. Displaying Show Data


We need to be able to display the data we fetched from Firebase in the last episode. Luckily, Vue makes that a breeze!

7. Adding a Show Detail view


It would be nice to be able to send visitors to a specific link about a given Broadway show. Let's add a ShowDetail component which will display information about one specific show. We'll use Firebase to query information about this specific show as well.

8. New Show Form


Let's create a form to allow a user to add a new show to our collection.

9. Persisting Data


Now that we have a show form, let's complete the work by persisting the data to Firebase.

10. Editing a Show


We can create shows, but what if we need to make changes? Let's create a mechanism which allows the user to edit a show.

11. Refactoring


We have both a ShowCreate and ShowEdit view, but they're almost identical in markup. Let's try to refactor the shared logic into a child component called ShowForm.

12. Deleting Shows


At some point, we're going to need to be able to delete a show. Let's add that functionality into our app with a button and a call to Firebase.

13. Adding Authentication


Right now, any user on the internet could update, add or delete a show. That's probably not ideal for a production application. Luckily, Firebase provides user authentication out of the box. We'll leverage Firebase UI to add user registration, login and authentication to our app.

14. Adding Protection


Let's use the authentication we added in the last lesson to authorize behaviors for a given user. We'll add some route protection and extract the app boot-up process to a Vuex store.

When can I watch something new?

I'm glad you asked. Add your email below, and you'll be the first to know when I add new course material!