How to Build a Real-world App: A Nuxt.js Firebase Tutorial (Part 2)
This is the second part of a two-part blog post that will introduce you to Nuxt.js, a higher-level framework that builds on top of Vue. In Part 1 of this tutorial, we created a simple project to consume a blog post API endpoint and then display it. Part 2 of this tutorial will focus on Nuxt.js and Firebase as we implement a basic register functionality that syncs with Firebase as a database and creates a nice layout.
The real value in this Nuxt.js tutorial is that it provides an introduction to the Firebase API. That may sound intimidating, but I think you’ll find this example is intuitive. We’ll finish up by learning how Nuxt.js can help us deal with pages, themes, and storage. In just a short time, you can increase your knowledge of this technology, opening a new window of cloud opportunities.
Step 1: Main navigation
Now that we have created a basic, functional example for our Nuxt.js tutorial, let’s create a main nav and a register page, use the storage, and connect it to Firebase.
- Inside the pages directory, create a new folder with the name: register.
- Inside that folder create a file: index.vue.
- Go to the browser and add: “http://localhost:3000/register” that URL should display the content between the <template> tag from that index.vue.
- For the navigation bar, go to the main pages/index.vue. The tag: <md-toolbar> must be added at the very beginning. It will need a title inside the <nuxt-link> tag, and a button that redirects to the “Register page.” For an example, look at the file from the repo: index.vue.
- Now let’s create a basic store to manage the data for our app. Go to the store folder, create an index.js file, and import the ‘vuex’. This file is quite important because:
• Defines the properties for the state that are going to be managed in the store,
• Contains the getters that allow us to pass any piece of the state to any component, and in the component we can reference that part from the state using a computed property.
Using the Axios library and the previously created “apiURL” we need to assign that endpoint value to the const blogPost. Then we must be sure that the “posts” array in the component is going to get the required values. How can we do this? Using a mutation to update the store with the posts, and sending it away to the component using a getter function. Basically, this is what you need:
*Tip: If you are using Chrome, you can install a Vue extension to develop tools: This useful tool will allow you to check for data in real-time, such as components, Vuex, events, routing, and performance.
Step 2: User registration with Firebase
To add more complexity to our Nuxt.js tutorial, our app will connect with Firebase user registration. If you don’t already have Firebase, please create an account. Go to the console (main Firebase Dashboard) and add a new project (Analytics are not required).
We will connect the Firebase Auth REST API, so please review the documentation.
Go to the section: Sign up with email / password and copy the endpoint there. It should be something like this. Just remember to replace [API_KEY] with the “Web API Key” from the project that you already created.
We must also add a new proxy inside nuxt.config.js , which we can call “/register/“; the target should be the endpoint that we took from Firebase (with our App API KEY), and the pathRewrite might be like: pathRewrite: { “^/register/”: “” }.
Now, inside of register/index.vue, generate the form layout for registering using the Vue Material classes. For this, we can use the documentation found here.
Inside the <template> </template> area, add a register form, with email and password; Vue material can be used as an example or check our repo. Inside the <script> </script> the data array should only contain this:
And in the methods section:
As you can see, the method: registerUser() will use the storage to manipulate the form data; but what is that method called? Well, we will add this inside the <form> tag: @submit.prevent=”registerUser”.
But what about the dispatched method authenticateUser? We’ll add that inside store/index.js as an action. This action is the one that will manage the communication between our app and the Firebase service using Axios.
Important: Go to the Authentication section in Firebase and press: “Set up sign-in method,” select the provider: Email/Password and turn it to “Enabled.”
It’s time to restart our local app, test the form, and make sure that the info is properly stored inside Firebase. To check, go to the Authentication page; if the new user is displayed there, everything is working as expected.
Step 3: Confirmation message
The next step is to display a confirmation message and redirect from the Register Page to the Homepage. For that, we will use a simple “token” variable. The app will know if a user was registered because this value exists in the store; and if it exists, the next step is to disable the form fields once registration is completed. So we need to get the “token” value in the register/index.js using a computed property called “token” and use it to disable the inputs.
This “loading” variable can be set with the idToken that Firebase returns any time a registration is successfully completed.
1. Add the loading value in store/index.js as a new variable inside the const state like:
token: "",
2. Create a mutation for the loading value
setToken(state, token) {
state.token = token;
}
3. Commit the loading value inside the action authenticateUser():
commit('setToken', authUserData.idToken);
Define a getter const with the name: “authenticated” that contains:
authenticated: state => !!state.token
That evaluates and converts to true if it is set.
4. Now, in the file: page/register/index.js we need to know if that token was set, so we need to get it with a computed function:
authenticated(){
return this.$store.getters.authenticated;
}
5. Next, with a watcher function, if token (the registering operations completed successfully), the system will redirect to the homepage after some seconds, but first we need to display a successful message inside a snackbar tag, at the end of the template HTML code:
Step 4: Creating the avatar
To complete this exercise, let’s add an avatar for the user and display it in the main top nav. The first step is to add a const in the store/index.js. But first you need:
- Avatar generation needs a hasher generator on any string, so let’s install the md5 library in the terminal:
$npm install md5
- Import it at the beginning of the store/index.js file: import md5 from ‘md5’;
- To manage the avatar user info, let’s create a user prop, a user mutation, and a user getter to keep it:
For this example, we will use gravatar.com, so the avatar should be created inside the authenticateUser action with this line:
const avatar = 'http://gravatar.com/avatar/${hasha(authUserData.email)}?d=robohash';
const user = {email:authUserData.email, avatar};
Those are the required lines inside the store/index.js; more information is available here.
Now let’s display the avatar in the main index.js. We’ll create a computed action to get the user information (avatar) previously added in the store. In the logic, the avatar should appear if the user was successfully registered; if the user hasn’t successfully registered, the “Register” link should appear.
As you work, remember to refresh your local app often with:
$npm run dev
When this exercise is complete, you should have something that looks like this, showing a successfully registered user in the nav:
Wrapping up our simple Nuxt.js Firebase tutorial
We’re done! Remember that you can download and check the repo here.
I hope that you enjoyed this Nuxt.js Firebase tutorial. It’s a useful and powerful option when you need a Vue.js tool that is easy to maintain, understand, and work with as a team.
____
References:
