Vue 2 + Firebase: How to build a Vue app with Firebase authentication system in 15 minutes

What is Vue.js ?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projectsfrom vuejs official documentation: https://vuejs.org/v2/guide

Why Vue.js ?

What is Firebase ?

Firebase is a mobile and web application development platform. Firebase is made up of complementary features that developers can mix-and-match to fit their needs. [...] Firebase's initial product was a realtime database, which provides an API that allows developers to store and sync data across multiple clients. Over time, it has expanded its product line to become a full suite for app development.from wikipedia: https://en.wikipedia.org/wiki/Firebase

Why Firebase ?

Let’s start !

$ npm install -g @vue/cli
Usage
$ vue create <project-name>
$ vue create vue-firebase-tutorial
vue create vue-firebase-tutorial
choose ‘Router’ option
$ cd vue-firebase-tutorial
$ npm run serve
default view from the new Vue project
app structure

LET’S WRITE SOME CODE !

app architecture

Step One: Login and SignUp

Login component.`src/views/Login.vue`
vue-router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.from vue-router documentation: https://github.com/vuejs/vue-route
src/router.js
http://localhost:8080/#/login
html template of App component
The <router-view> component is a functional component that renders the matched component for the given path. Components rendered in <router-view> can also contain its own <router-view>, which will render components for nested paths.from vue-router documentation https://router.vuejs.org/en/api/router-view.html
App Component in `src/App.vue`
src/router.js
style of Login component
Login view with css applied
src/views/SignUp.vue
src/router.js
SignUp view

Step Two: Navigation between views

<router-link> is the component for enabling user navigation in a router-enabled app. The target location is specified with the to prop. It renders as an <a> tag with correct href by default, but can be configured with the tag prop. In addition, the link automatically gets an active CSS class when the target route is active.from vue-router documentation: https://router.vuejs.org/en/api/router-link.html
src/views/Login.vue
src/views/SignUp.vue
Listening to EventsWe can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.from Vue 2 doc: https://vuejs.org/v2/guide/events.html#Listening-to-Events
src/views/Login.vue
src/App.vue
src/router.js

Step Three: Firebase Integration

Firebase console
Create a new project
project home page on Firebase
// Initialize Firebaselet config = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SEND_ID"
};
firebase.initializeApp(config);
$ npm install ——save firebase
src/main.js
You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.from Vue 2 documentation: https://vuejs.org/v2/guide/forms.html
src/views/SignUp.vue
The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section.
src/views/Login.vue

Step Four: Access the app only with authentication

src/router.js
Navigation GuardsAs the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.from vue-router documentation: https://router.vuejs.org/en/advanced/navigation-guards.html
src/router.js
src/main.js
src/views/Home.vue
src/Login.vue
src/views/SignUp.vue

The End

--

--

--

Freelance Javascript Developer | anasmammeri.me

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anas Mammeri

Anas Mammeri

Freelance Javascript Developer | anasmammeri.me

More from Medium

Create multilingual web app using VueJS 2 + vue 18n

Vue — Basic Concepts — Ch 02

Firebase web: Authentication with email and password. — Vuejs

Todo App using VueJS 3 Composition API and Tailwind CSS

Actual App Screenshot Showcase