Archie  Clayton

Archie Clayton

1566802337

Build Firestore Database CRUD Web App using Vue.js and Firebase

Originally published at https://www.djamware.com

In this tutorial, we are using standard Firebase module for Javascript. Starting from the Firebase connection to Firestore Database CRUD (Create, Read, Update, Delete) operation.

Table of Contents:

  • Setup Firebase Firestore Database
  • Install Vue-CLI 3 and Create Vue.js App
  • Install and Configure the Firebase Module
  • Add Vue.js Router
  • List of Boards using Bootstrap-Vue
  • Show Details and Delete Board using Bootstrap-Vue
  • Add Board using Bootstrap-Vue
  • Edit Board using Bootstrap-Vue
  • Run and Test Vue.js Firebase Firestore Web Application

The following tools, framework, and module are required for this tutorial:

  • Node.js (Recommended version)
  • Vue.js
  • Firebase
  • Terminal (Mac/Linux) or Node Command Line (Windows)
  • IDE or Text Editor

We assume that you have already installed Node.js. Make sure Node.js command line is working (on Windows) or runnable in Linux/OS X terminal.

Setup Firebase Firestore Database

Setup Google Firebase is very simple. Open your browser then go to Google Firebase Console and log in using your Google account.

Click the `Add Project` button, name it as you like and checks all checkboxes. Finally, click `Create Project` button then wait a few seconds and click the `Continue` button. You will be redirected to this page.

Go to Develop menu on the left menu then click `Create Database` on Cloud Firestore page.

Choose `Start in test mode` then click `Enabled` button.

Click `Add Collection` button to add the new collection for this tutorial. Fill collection ID (ours: 'boards') then click next. Add the required fields then click finish the wizard.

Now, the Firebase Firestore Database is ready to access. Make sure that your iOS and Android app match with the configuration files (json/plist). You can get the configuration parameters in the Authentication side menu then you will see the Web Setup button on the top right of the screen.

Install Vue-CLI 3 and Create Vue.js App

Vue CLI is a full system for rapid Vue.js development with the current latest version is 3. To install Vue-CLI 3 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 3.x version of Vue-CLI.

vue --version

Next, create a new Vue.js project by type this command.

vue create vue-firestore

For now, use the default for every question that shows up in the Terminal. Next, go to the newly created folder.

cd ./vue-firestore

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn serve

You will see this page when open `http://localhost:8080/` in the browser.


Install and Configure the Firebase Module

We use Firebase module to access the Firebase Firestore Database. For that, type this command to install the module.

npm install --save firebase

Next, create a new file `Firebase.js` in the root of the project folder for Firebase configuration.

touch src/Firebase.js

Open and edit src/Firebase.js then replace all codes with this.

 import * as firebase from 'firebase';

import firestore from ‘firebase/firestore’

 

const settings = {timestampsInSnapshots: true};

 

const config = {

  apiKey: “YOUR_API_KEY”,

  authDomain: “YOUR_AUTH_DOMAIN”,

  databaseURL: “YOUR_DATABASE_URL”,

  projectId: “YOUR_PROJECT_ID”,

  storageBucket: “YOUR_STORAGE_BUCKET”

};

firebase.initializeApp(config);

 

firebase.firestore().settings(settings);

 

export default firebase;

You can find or get those configuration parameters by click on Web Setup button in the page authentication of Firebase Console.

Add Vue.js Router

By default vue-router is not installed. For that, type this command to install that module.

npm install --save vue-router

To register or create routes for the whole application navigation, create a router folder and index.js file.

mkdir src/router
touch src/router/index.js

Open and edit src/router/index.js then add these imports of VueRouter and the required created components.

import VueRouter from ‘vue-router’
import BoardList from ‘@/components/BoardList’
import ShowBoard from ‘@/components/ShowBoard’
import AddBoard from ‘@/components/AddBoard’
import EditBoard from ‘@/components/EditBoard’

Add the router to each component or page.

export default new VueRouter({
  routes: [
    {
      path: ‘/’,
      name: ‘BoardList’,
      component: BoardList
    },
    {
      path: ‘/show-board/:id’,
      name: ‘ShowBoard’,
      component: ShowBoard
    },
    {
      path: ‘/add-board’,
      name: ‘AddBoard’,
      component: AddBoard
    },
    {
      path: ‘/edit-board/:id’,
      name: ‘EditBoard’,
      component: EditBoard
    }
  ]
})

Add Vue files for above-registered components or pages.

touch src/components/BoardList.vue
touch src/components/ShowBoard.vue
touch src/components/AddBoard.vue
touch src/components/EditBoard.vue

Finally, add or register this router file to src/main.js by adding these imports of VueRouter and router.

import VueRouter from ‘vue-router’
import router from ‘./router’

Register the Vue-Router after Vue.config.

Vue.use(VueRouter)

Modify new Vue to be like this.

 new Vue({
  router,
  render: h => h(App)
}).$mount(‘#app’)

List of Boards using Bootstrap-Vue

Before create or show data to the views, we have to add Bootstrap-Vue. Type this command to install the module.

npm i bootstrap-vue

Next, open and edit src/main.js then add these imports of BootstrapVue and Bootstrap stylesheet.

import BootstrapVue from ‘bootstrap-vue’
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’

Add this line after Vue.config.

Vue.use(BootstrapVue);

Now, open and edit src/components/BoardList.vue then add these lines of codes that contain Bootstrap-Vue templates and a method to get the list of data from Firebase.

 <template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Board List
        <b-link href=“#/add-board”>(Add Board)</b-link>
      </h2>
      <b-table striped hover :items=“boards” :fields=“fields”>
        <template slot=“actions” scope=“row”>
          <b-btn size=“sm” @click.stop=“details(row.item)”>Details</b-btn>
        </template>
      </b-table>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘BoardList’,
  data () {
    return {
      fields: {
        title: { label: ‘Title’, sortable: true, ‘class’: ‘text-left’ },
        actions: { label: ‘Action’, ‘class’: ‘text-center’ }
      },
      boards: [],
      errors: [],
      ref: firebase.firestore().collection(‘boards’),
    }
  },
  created () {
    this.ref.onSnapshot((querySnapshot) => {
      this.boards = [];
      querySnapshot.forEach((doc) => {
        this.boards.push({
          key: doc.id,
          title: doc.data().title
        });
      });
    });
  },
  methods: {
    details (board) {
      router.push({ name: ‘ShowBoard’, params: { id: board.key }})
    }
  }
}
</script>
 
<style>
  .table {
    width: 96%;
    margin: 0 auto;
  }
</style>

Show Details and Delete Board using Bootstrap-Vue

Open and edit src/components/ShowBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and a method to get single data from Firebase.

 <template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Edit Board
        <b-link href=“#/”>(Board List)</b-link>
      </h2>
      <b-jumbotron>
        <template slot=“header”>
          {{board.title}}
        </template>
        <template slot=“lead”>
          Title: {{board.title}}<br>
          Description: {{board.description}}<br>
          Author: {{board.author}}<br>
        </template>
        <hr class=“my-4”>
        <b-btn class=“edit-btn” variant=“success” @click.stop=“editboard(key)”>Edit</b-btn>
        <b-btn variant=“danger” @click.stop=“deleteboard(key)”>Delete</b-btn>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘ShowBoard’,
  data () {
    return {
      key: ‘’,
      board: {}
    }
  },
  created () {
    const ref = firebase.firestore().collection(‘boards’).doc(this.$route.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.key = doc.id;
        this.board = doc.data();
      } else {
        alert(“No such document!”);
      }
    });
  },
  methods: {
    editboard (id) {
      router.push({
        name: ‘EditBoard’,
        params: { id: id }
      })
    },
    deleteboard (id) {
      firebase.firestore().collection(‘boards’).doc(id).delete().then(() => {
        router.push({
          name: ‘BoardList’
        })
      }).catch((error) => {
        alert(“Error removing document: “, error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
  .edit-btn {
    margin-right: 20px;
    width: 70px;
  }
</style>

Add Board using Bootstrap-Vue

Open and edit src/components/AddBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and the method to post data to Firebase.

 <template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Add Board
        <b-link href=”#/”>(Board List)</b-link>
      </h2>
      <b-jumbotron>
        <b-form @submit=“onSubmit”>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Title”>
            <b-form-input id=“title” v-model.trim=“board.title”></b-form-input>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Description”>
              <b-form-textarea id=“description”
                         v-model=“board.description”
                         placeholder=“Enter something”
                         :rows=“2”
                         :max-rows=“6”>{{board.description}}</b-form-textarea>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Author”>
            <b-form-input id=“author” v-model.trim=“board.author”></b-form-input>
          </b-form-group>
          <b-button type=“submit” variant=“primary”>Save</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘AddBoard’,
  data () {
    return {
      ref: firebase.firestore().collection(‘boards’),
      board: {}
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
 
      this.ref.add(this.board).then((docRef) => {
        this.board.title = ‘’
        this.board.description = ‘’
        this.board.author = ‘’
        router.push({
          name: ‘BoardList’
        })
      })
      .catch((error) => {
        alert(“Error adding document: “, error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
</style>

 Edit Board using Bootstrap-Vue

Open and edit src/components/EditBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and Vue method to get or post data from or to Firebase.

<template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Edit Board
        <router-link :to=”{ name: ‘ShowBoard’, params: { id: key } }”>(Show Board)</router-link>
      </h2>
      <b-jumbotron>
        <b-form @submit=“onSubmit”>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Title”>
            <b-form-input id=“title” v-model.trim=“board.title”></b-form-input>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Description”>
              <b-form-textarea id=“description”
                         v-model=“board.description”
                         placeholder=“Enter something”
                         :rows=“2”
                         :max-rows=“6”>{{board.description}}</b-form-textarea>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Author”>
            <b-form-input id=“author” v-model.trim=“board.author”></b-form-input>
          </b-form-group>
          <b-button type=“submit” variant=“primary”>Update</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘EditBoard’,
  data () {
    return {
      key: this.$route.params.id,
      board: {}
    }
  },
  created () {
    const ref = firebase.firestore().collection(‘boards’).doc(this.$route.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.board = doc.data();
      } else {
        alert(“No such document!”);
      }
    });
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      const updateRef = firebase.firestore().collection(‘boards’).doc(this.$route.params.id);
      updateRef.set(this.board).then((docRef) => {
        this.key = ‘’
        this.board.title = ‘’
        this.board.description = ‘’
        this.board.author = ‘’
        router.push({ name: ‘ShowBoard’, params: { id: this.$route.params.id }})
      })
      .catch((error) => {
        alert("Error adding document: ", error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
</style>

Run and Test Vue.js Firebase Firestore Web Application

This time to test all complete the Vue.js and Firebase Firestore Database Stack CRUD web application. Type this command to run again this web application.

yarn serve


And here the application looks like, you can test all CRUD functionality.

That it’s, the Vue.js Firebase Tutorial: Build Firestore CRUD Web Application. You can find the working source code from our GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Build a Progressive Web App In VueJs

Build a CMS with Laravel and Vue

Beginner’s Guide to Vue.js


#vue-js #firebase #web-development #javascript

What is GEEK

Buddha Community

Build Firestore Database CRUD Web App using Vue.js and Firebase
Aria Barnes

Aria Barnes

1625232484

Why is Vue JS the most Preferred Choice for Responsive Web Application Development?

For more than two decades, JavaScript has facilitated businesses to develop responsive web applications for their customers. Used both client and server-side, JavaScript enables you to bring dynamics to pages through expanded functionality and real-time modifications.

Did you know!

According to a web development survey 2020, JavaScript is the most used language for the 8th year, with 67.7% of people choosing it. With this came up several javascript frameworks for frontend, backend development, or even testing.

And one such framework is Vue.Js. It is used to build simple projects and can also be advanced to create sophisticated apps using state-of-the-art tools. Beyond that, some other solid reasons give Vuejs a thumbs up for responsive web application development.

Want to know them? Then follow this blog until the end. Through this article, I will describe all the reasons and benefits of Vue js development. So, stay tuned.

Vue.Js - A Brief Introduction

Released in the year 2014 for public use, Vue.Js is an open-source JavaScript framework used to create UIs and single-page applications. It has over 77.4 million likes on Github for creating intuitive web interfaces.

The recent version is Vue.js 2.6, and is the second most preferred framework according to Stack Overflow Developer Survey 2019.

Every Vue.js development company is widely using the framework across the world for responsive web application development. It is centered around the view layer, provides a lot of functionality for the view layer, and builds single-page web applications.

Some most astonishing stats about Vue.Js:

• Vue was ranked #2 in the Front End JavaScript Framework rankings in the State of JS 2019 survey by developers.

• Approximately 427k to 693k sites are built with Vue js, according to Wappalyzer and BuiltWith statistics of June 2020.

• According to the State of JS 2019 survey, 40.5% of JavaScript developers are currently using Vue, while 34.5% have shown keen interest in using it in the future.

• In Stack Overflow's Developer Survey 2020, Vue was ranked the 3rd most popular front-end JavaScript framework.

Why is Vue.Js so popular?

• High-speed run-time performance
• Vue.Js uses a virtual DOM.
• The main focus is on the core library, while the collaborating libraries handle other features such as global state management and routing.
• Vue.JS provides responsive visual components.

Top 7 Reasons to Choose Vue JS for Web Application Development

Vue js development has certain benefits, which will encourage you to use it in your projects. For example, Vue.js is similar to Angular and React in many aspects, and it continues to enjoy increasing popularity compared to other frameworks.

The framework is only 20 kilobytes in size, making it easy for you to download files instantly. Vue.js easily beats other frameworks when it comes to loading times and usage.

Take a look at the compelling advantages of using Vue.Js for web app development.

#1 Simple Integration

Vue.Js is popular because it allows you to integrate Vue.js into other frameworks such as React, enabling you to customize the project as per your needs and requirements.

It helps you build apps with Vue.js from scratch and introduce Vue.js elements into their existing apps. Due to its ease of integration, Vue.js is becoming a popular choice for web development as it can be used with various existing web applications.

You can feel free to include Vue.js CDN and start using it. Most third-party Vue components and libraries are additionally accessible and supported with the Vue.js CDN.

You don't need to set up node and npm to start using Vue.js. This implies that it helps develop new web applications, just like modifying previous applications.

The diversity of components allows you to create different types of web applications and replace existing frameworks. In addition, you can also choose to hire Vue js developers to use the technology to experiment with many other JavaScript applications.

#2 Easy to Understand

One of the main reasons for the growing popularity of Vue.Js is that the framework is straightforward to understand for individuals. This means that you can easily add Vue.Js to your web projects.

Also, Vue.Js has a well-defined architecture for storing your data with life-cycle and custom methods. Vue.Js also provides additional features such as watchers, directives, and computed properties, making it extremely easy to build modern apps and web applications with ease.

Another significant advantage of using the Vue.Js framework is that it makes it easy to build small and large-scale web applications in the shortest amount of time.

#3 Well-defined Ecosystem

The VueJS ecosystem is vibrant and well-defined, allowing Vue.Js development company to switch users to VueJS over other frameworks for web app development.

Without spending hours, you can easily find solutions to your problems. Furthermore, VueJs lets you choose only the building blocks you need.

Although the main focus of Vue is the view layer, with the help of Vue Router, Vue Test Utils, Vuex, and Vue CLI, you can find solutions and recommendations for frequently occurring problems.

The problems fall into these categories, and hence it becomes easy for programmers to get started with coding right away and not waste time figuring out how to use these tools.

The Vue ecosystem is easy to customize and scales between a library and a framework. Compared to other frameworks, its development speed is excellent, and it can also integrate different projects. This is the reason why most website development companies also prefer the Vue.Js ecosystem over others.

#4 Flexibility

Another benefit of going with Vue.Js for web app development needs is flexibility. Vue.Js provides an excellent level of flexibility. And makes it easier for web app development companies to write their templates in HTML, JavaScript, or pure JavaScript using virtual nodes.

Another significant benefit of using Vue.Js is that it makes it easier for developers to work with tools like templating engines, CSS preprocessors, and type checking tools like TypeScript.

#5 Two-Way Communication

Vue.Js is an excellent option for you because it encourages two-way communication. This has become possible with the MVVM architecture to handle HTML blocks. In this way, Vue.Js is very similar to Angular.Js, making it easier to handle HTML blocks as well.

With Vue.Js, two-way data binding is straightforward. This means that any changes made by the developer to the UI are passed to the data, and the changes made to the data are reflected in the UI.

This is also one reason why Vue.Js is also known as reactive because it can react to changes made to the data. This sets it apart from other libraries such as React.Js, which are designed to support only one-way communication.

#6 Detailed Documentation

One essential thing is well-defined documentation that helps you understand the required mechanism and build your application with ease. It shows all the options offered by the framework and related best practice examples.

Vue has excellent docs, and its API references are one of the best in the industry. They are well written, clear, and accessible in dealing with everything you need to know to build a Vue application.

Besides, the documentation at Vue.js is constantly improved and updated. It also includes a simple introductory guide and an excellent overview of the API. Perhaps, this is one of the most detailed documentation available for this type of language.

#7 Large Community Support

Support for the platform is impressive. In 2018, support continued to impress as every question was answered diligently. Over 6,200 problems were solved with an average resolution time of just six hours.

To support the community, there are frequent release cycles of updated information. Furthermore, the community continues to grow and develop with backend support from developers.



Wrapping Up

VueJS is an incredible choice for responsive web app development. Since it is lightweight and user-friendly, it builds a fast and integrated web application. The capabilities and potential of VueJS for web app development are extensive.

While Vuejs is simple to get started with, using it to build scalable web apps requires professionalism. Hence, you can approach a top Vue js development company in India to develop high-performing web apps.

Equipped with all the above features, it doesn't matter whether you want to build a small concept app or a full-fledged web app; Vue.Js is the most performant you can rely on.

Original source

 

#vue js development company #vue js development company in india #vue js development company india #vue js development services #vue js development #vue js development companies

Fredy  Larson

Fredy Larson

1595059664

How long does it take to develop/build an app?

With more of us using smartphones, the popularity of mobile applications has exploded. In the digital era, the number of people looking for products and services online is growing rapidly. Smartphone owners look for mobile applications that give them quick access to companies’ products and services. As a result, mobile apps provide customers with a lot of benefits in just one device.

Likewise, companies use mobile apps to increase customer loyalty and improve their services. Mobile Developers are in high demand as companies use apps not only to create brand awareness but also to gather information. For that reason, mobile apps are used as tools to collect valuable data from customers to help companies improve their offer.

There are many types of mobile applications, each with its own advantages. For example, native apps perform better, while web apps don’t need to be customized for the platform or operating system (OS). Likewise, hybrid apps provide users with comfortable user experience. However, you may be wondering how long it takes to develop an app.

To give you an idea of how long the app development process takes, here’s a short guide.

App Idea & Research

app-idea-research

_Average time spent: two to five weeks _

This is the initial stage and a crucial step in setting the project in the right direction. In this stage, you brainstorm ideas and select the best one. Apart from that, you’ll need to do some research to see if your idea is viable. Remember that coming up with an idea is easy; the hard part is to make it a reality.

All your ideas may seem viable, but you still have to run some tests to keep it as real as possible. For that reason, when Web Developers are building a web app, they analyze the available ideas to see which one is the best match for the targeted audience.

Targeting the right audience is crucial when you are developing an app. It saves time when shaping the app in the right direction as you have a clear set of objectives. Likewise, analyzing how the app affects the market is essential. During the research process, App Developers must gather information about potential competitors and threats. This helps the app owners develop strategies to tackle difficulties that come up after the launch.

The research process can take several weeks, but it determines how successful your app can be. For that reason, you must take your time to know all the weaknesses and strengths of the competitors, possible app strategies, and targeted audience.

The outcomes of this stage are app prototypes and the minimum feasible product.

#android app #frontend #ios app #minimum viable product (mvp) #mobile app development #web development #android app development #app development #app development for ios and android #app development process #ios and android app development #ios app development #stages in app development

Archie  Clayton

Archie Clayton

1566802337

Build Firestore Database CRUD Web App using Vue.js and Firebase

Originally published at https://www.djamware.com

In this tutorial, we are using standard Firebase module for Javascript. Starting from the Firebase connection to Firestore Database CRUD (Create, Read, Update, Delete) operation.

Table of Contents:

  • Setup Firebase Firestore Database
  • Install Vue-CLI 3 and Create Vue.js App
  • Install and Configure the Firebase Module
  • Add Vue.js Router
  • List of Boards using Bootstrap-Vue
  • Show Details and Delete Board using Bootstrap-Vue
  • Add Board using Bootstrap-Vue
  • Edit Board using Bootstrap-Vue
  • Run and Test Vue.js Firebase Firestore Web Application

The following tools, framework, and module are required for this tutorial:

  • Node.js (Recommended version)
  • Vue.js
  • Firebase
  • Terminal (Mac/Linux) or Node Command Line (Windows)
  • IDE or Text Editor

We assume that you have already installed Node.js. Make sure Node.js command line is working (on Windows) or runnable in Linux/OS X terminal.

Setup Firebase Firestore Database

Setup Google Firebase is very simple. Open your browser then go to Google Firebase Console and log in using your Google account.

Click the `Add Project` button, name it as you like and checks all checkboxes. Finally, click `Create Project` button then wait a few seconds and click the `Continue` button. You will be redirected to this page.

Go to Develop menu on the left menu then click `Create Database` on Cloud Firestore page.

Choose `Start in test mode` then click `Enabled` button.

Click `Add Collection` button to add the new collection for this tutorial. Fill collection ID (ours: 'boards') then click next. Add the required fields then click finish the wizard.

Now, the Firebase Firestore Database is ready to access. Make sure that your iOS and Android app match with the configuration files (json/plist). You can get the configuration parameters in the Authentication side menu then you will see the Web Setup button on the top right of the screen.

Install Vue-CLI 3 and Create Vue.js App

Vue CLI is a full system for rapid Vue.js development with the current latest version is 3. To install Vue-CLI 3 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 3.x version of Vue-CLI.

vue --version

Next, create a new Vue.js project by type this command.

vue create vue-firestore

For now, use the default for every question that shows up in the Terminal. Next, go to the newly created folder.

cd ./vue-firestore

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn serve

You will see this page when open `http://localhost:8080/` in the browser.


Install and Configure the Firebase Module

We use Firebase module to access the Firebase Firestore Database. For that, type this command to install the module.

npm install --save firebase

Next, create a new file `Firebase.js` in the root of the project folder for Firebase configuration.

touch src/Firebase.js

Open and edit src/Firebase.js then replace all codes with this.

 import * as firebase from 'firebase';

import firestore from ‘firebase/firestore’

 

const settings = {timestampsInSnapshots: true};

 

const config = {

  apiKey: “YOUR_API_KEY”,

  authDomain: “YOUR_AUTH_DOMAIN”,

  databaseURL: “YOUR_DATABASE_URL”,

  projectId: “YOUR_PROJECT_ID”,

  storageBucket: “YOUR_STORAGE_BUCKET”

};

firebase.initializeApp(config);

 

firebase.firestore().settings(settings);

 

export default firebase;

You can find or get those configuration parameters by click on Web Setup button in the page authentication of Firebase Console.

Add Vue.js Router

By default vue-router is not installed. For that, type this command to install that module.

npm install --save vue-router

To register or create routes for the whole application navigation, create a router folder and index.js file.

mkdir src/router
touch src/router/index.js

Open and edit src/router/index.js then add these imports of VueRouter and the required created components.

import VueRouter from ‘vue-router’
import BoardList from ‘@/components/BoardList’
import ShowBoard from ‘@/components/ShowBoard’
import AddBoard from ‘@/components/AddBoard’
import EditBoard from ‘@/components/EditBoard’

Add the router to each component or page.

export default new VueRouter({
  routes: [
    {
      path: ‘/’,
      name: ‘BoardList’,
      component: BoardList
    },
    {
      path: ‘/show-board/:id’,
      name: ‘ShowBoard’,
      component: ShowBoard
    },
    {
      path: ‘/add-board’,
      name: ‘AddBoard’,
      component: AddBoard
    },
    {
      path: ‘/edit-board/:id’,
      name: ‘EditBoard’,
      component: EditBoard
    }
  ]
})

Add Vue files for above-registered components or pages.

touch src/components/BoardList.vue
touch src/components/ShowBoard.vue
touch src/components/AddBoard.vue
touch src/components/EditBoard.vue

Finally, add or register this router file to src/main.js by adding these imports of VueRouter and router.

import VueRouter from ‘vue-router’
import router from ‘./router’

Register the Vue-Router after Vue.config.

Vue.use(VueRouter)

Modify new Vue to be like this.

 new Vue({
  router,
  render: h => h(App)
}).$mount(‘#app’)

List of Boards using Bootstrap-Vue

Before create or show data to the views, we have to add Bootstrap-Vue. Type this command to install the module.

npm i bootstrap-vue

Next, open and edit src/main.js then add these imports of BootstrapVue and Bootstrap stylesheet.

import BootstrapVue from ‘bootstrap-vue’
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’

Add this line after Vue.config.

Vue.use(BootstrapVue);

Now, open and edit src/components/BoardList.vue then add these lines of codes that contain Bootstrap-Vue templates and a method to get the list of data from Firebase.

 <template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Board List
        <b-link href=“#/add-board”>(Add Board)</b-link>
      </h2>
      <b-table striped hover :items=“boards” :fields=“fields”>
        <template slot=“actions” scope=“row”>
          <b-btn size=“sm” @click.stop=“details(row.item)”>Details</b-btn>
        </template>
      </b-table>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘BoardList’,
  data () {
    return {
      fields: {
        title: { label: ‘Title’, sortable: true, ‘class’: ‘text-left’ },
        actions: { label: ‘Action’, ‘class’: ‘text-center’ }
      },
      boards: [],
      errors: [],
      ref: firebase.firestore().collection(‘boards’),
    }
  },
  created () {
    this.ref.onSnapshot((querySnapshot) => {
      this.boards = [];
      querySnapshot.forEach((doc) => {
        this.boards.push({
          key: doc.id,
          title: doc.data().title
        });
      });
    });
  },
  methods: {
    details (board) {
      router.push({ name: ‘ShowBoard’, params: { id: board.key }})
    }
  }
}
</script>
 
<style>
  .table {
    width: 96%;
    margin: 0 auto;
  }
</style>

Show Details and Delete Board using Bootstrap-Vue

Open and edit src/components/ShowBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and a method to get single data from Firebase.

 <template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Edit Board
        <b-link href=“#/”>(Board List)</b-link>
      </h2>
      <b-jumbotron>
        <template slot=“header”>
          {{board.title}}
        </template>
        <template slot=“lead”>
          Title: {{board.title}}<br>
          Description: {{board.description}}<br>
          Author: {{board.author}}<br>
        </template>
        <hr class=“my-4”>
        <b-btn class=“edit-btn” variant=“success” @click.stop=“editboard(key)”>Edit</b-btn>
        <b-btn variant=“danger” @click.stop=“deleteboard(key)”>Delete</b-btn>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘ShowBoard’,
  data () {
    return {
      key: ‘’,
      board: {}
    }
  },
  created () {
    const ref = firebase.firestore().collection(‘boards’).doc(this.$route.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.key = doc.id;
        this.board = doc.data();
      } else {
        alert(“No such document!”);
      }
    });
  },
  methods: {
    editboard (id) {
      router.push({
        name: ‘EditBoard’,
        params: { id: id }
      })
    },
    deleteboard (id) {
      firebase.firestore().collection(‘boards’).doc(id).delete().then(() => {
        router.push({
          name: ‘BoardList’
        })
      }).catch((error) => {
        alert(“Error removing document: “, error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
  .edit-btn {
    margin-right: 20px;
    width: 70px;
  }
</style>

Add Board using Bootstrap-Vue

Open and edit src/components/AddBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and the method to post data to Firebase.

 <template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Add Board
        <b-link href=”#/”>(Board List)</b-link>
      </h2>
      <b-jumbotron>
        <b-form @submit=“onSubmit”>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Title”>
            <b-form-input id=“title” v-model.trim=“board.title”></b-form-input>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Description”>
              <b-form-textarea id=“description”
                         v-model=“board.description”
                         placeholder=“Enter something”
                         :rows=“2”
                         :max-rows=“6”>{{board.description}}</b-form-textarea>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Author”>
            <b-form-input id=“author” v-model.trim=“board.author”></b-form-input>
          </b-form-group>
          <b-button type=“submit” variant=“primary”>Save</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘AddBoard’,
  data () {
    return {
      ref: firebase.firestore().collection(‘boards’),
      board: {}
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
 
      this.ref.add(this.board).then((docRef) => {
        this.board.title = ‘’
        this.board.description = ‘’
        this.board.author = ‘’
        router.push({
          name: ‘BoardList’
        })
      })
      .catch((error) => {
        alert(“Error adding document: “, error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
</style>

 Edit Board using Bootstrap-Vue

Open and edit src/components/EditBoard.vue then add these lines of codes that contain Bootstrap-Vue template components and Vue method to get or post data from or to Firebase.

<template>
  <b-row>
    <b-col cols=“12”>
      <h2>
        Edit Board
        <router-link :to=”{ name: ‘ShowBoard’, params: { id: key } }”>(Show Board)</router-link>
      </h2>
      <b-jumbotron>
        <b-form @submit=“onSubmit”>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Title”>
            <b-form-input id=“title” v-model.trim=“board.title”></b-form-input>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Description”>
              <b-form-textarea id=“description”
                         v-model=“board.description”
                         placeholder=“Enter something”
                         :rows=“2”
                         :max-rows=“6”>{{board.description}}</b-form-textarea>
          </b-form-group>
          <b-form-group id=“fieldsetHorizontal”
                    horizontal
                    :label-cols=“4”
                    breakpoint=“md”
                    label=“Enter Author”>
            <b-form-input id=“author” v-model.trim=“board.author”></b-form-input>
          </b-form-group>
          <b-button type=“submit” variant=“primary”>Update</b-button>
        </b-form>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>
 
<script>
 
import firebase from ‘…/Firebase’
import router from ‘…/router’
 
export default {
  name: ‘EditBoard’,
  data () {
    return {
      key: this.$route.params.id,
      board: {}
    }
  },
  created () {
    const ref = firebase.firestore().collection(‘boards’).doc(this.$route.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        this.board = doc.data();
      } else {
        alert(“No such document!”);
      }
    });
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault()
      const updateRef = firebase.firestore().collection(‘boards’).doc(this.$route.params.id);
      updateRef.set(this.board).then((docRef) => {
        this.key = ‘’
        this.board.title = ‘’
        this.board.description = ‘’
        this.board.author = ‘’
        router.push({ name: ‘ShowBoard’, params: { id: this.$route.params.id }})
      })
      .catch((error) => {
        alert("Error adding document: ", error);
      });
    }
  }
}
</script>
 
<style>
  .jumbotron {
    padding: 2rem;
  }
</style>

Run and Test Vue.js Firebase Firestore Web Application

This time to test all complete the Vue.js and Firebase Firestore Database Stack CRUD web application. Type this command to run again this web application.

yarn serve


And here the application looks like, you can test all CRUD functionality.

That it’s, the Vue.js Firebase Tutorial: Build Firestore CRUD Web Application. You can find the working source code from our GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Nuxt.js - Vue.js on Steroids

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Build a Progressive Web App In VueJs

Build a CMS with Laravel and Vue

Beginner’s Guide to Vue.js


#vue-js #firebase #web-development #javascript

Custom AngularJS Web App Development Company in USA

Looking for the best custom AngularJS app development company? AppClues Infotech is a top-rated AngularJS app development company in USA producing robust, highly interactive and data-driven AngularJS web and mobile applications with advanced features & technologies.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom angular js web app development company in usa #best angular js app development company in usa #hire angular js app developers in usa #top angular js app development company #professional angular js app developers #leading angular js app development agency

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js