Building Your first vue.js and firebase Web App [ Part -1]

A Simple way to get started with the simplest Javascript library as a novice and simplest real-time database “firebase”.

Introduction to Vue.js

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In the following you can find a list of features:

• Reactive Interfaces
• Declarative Rendering
• Data Binding
• Directives
• Template Logic
• Components
• Event Handling
• Computed Properties
• CSS Transitions and Animations
• Filters

The core library is just 17kb that means u can just add it to your html page with <script> tag and get started.

The Vue.js website is available at: https://vuejs.org/ to dive in.

Introduction to Firebase

Firebase is a mobile platform from Google offering a number of different features that you can pick ‘n mix from. Specifically, these features revolve around cloud services, allowing users to save and retrieve data to be accessed from any device or browser. This can be useful for such things as cloud messaging, hosting, crash reporting, notifications, analytics and even earning money through AdMob. Here we are going to use real time database feature.

In short, Firebase handles the backend online element for your apps, allowing you to focus on the front-end UI and functionality. All this is done through a single SDK with easy-to-use APIs and excellent integration into Android Studio. This removes the need to create your own server-side script using PHP and MySQL, or a similar set-up. This is ‘Backend as a Service’ or ‘BaaS’, and essentially this means that anyone really can make that ambitious social app. It works with Android apps, iOS apps and web apps and best of all: it’s free!

To set up firebase project is simple
https://console.firebase.google.com/

SetUp : Vue.js

There are different ways to include Vue.js in your web project:

• Use CDN by including <script> tag in HTML file
• Install using Node Package Manager (NPM)
• Install using Bower
• Use Vue-cli to setup your project

In the following we’re going to the Vue-cli to setup a new project and install the Vue.js 2 library.

Using Vue-cli

First, we need to install Vue-cli. The commend line interface is available as an NPM package. Make sure that Node.js and the npm command is available on your system and use the following command to install the Vue CLI globally on your local system:

$ npm install -g vue-cli

Having installed the client successfully the vue command becomes available. Now we’re able to initiate a project by using this command in the following way:

$ vue init webpack firevue-todo

when you run the command ( vue init)

now your vuejs template project will be downloaded and the structure of the project folder looks as below:

Project Structure

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

to know in detail click below

Project Structure · GitBook

Firebase Setup:

to be continued in next post….