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

  • 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: to dive in.

Introduction to Firebase

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

SetUp : Vue.js

  • 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

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

Firebase Setup:

On my way to be an indie developer, creator creating a focus on better living.

On my way to be an indie developer, creator creating a focus on better living.