How To Store Data In Firebase Using API Vuejs Guideline And Example

  • 22-06-2022
  • 447
  • Vue
  • Haresh Chauhan

If you are working with firebase, and you want to deploy a vue application with a firebase database you can simply use and easy to develop your vue application.

First, Go to the firebase application and create a project and then create a database in the firebase from that project you created in firebase.

After creating a database in firebase, It will return an API of the database, This will be your "API" from the send post request to save form data in the firebase database.

So once you entered the data and save this form data it will send the "firebase database" from the "API" post request and will save it there.

I attached some output of this given exmaple and how to handle send request to the fireabse.

OUTPUT PREVIEW :

Form Validation

This is a simple form for submitting user data with a validation example.

image

Send Request

Success response from firebase and it will return the user id from the firebase database.

image

Fireabse Database

This is our firebase database where I will store all collected user data from the API.

image

You can see in the attached image it will save the data here in the firebase database from the form send the request. You can see their user id of the user registration this will return to the API in response.

ExampleComponent

In this component, I have coded a simple bootstrap form you can see the above image form example output looks like in image.

In this form, I have taken simply some information about the user like user name, email, mobile, gender, and address.

On click method, I had defined in this form so when I click the save button it will fire the given method.

Also in data() I have defined a user array variable and this array variable gives the object of the user name, email, mobile address, etc.

After defining this variable in the user array I had called that variable in v-model in the form so whenever type the value of the input will append that given v-model variable.

If I user will submit the empty form the validation will also show that a given field is required.

src/components/ExampleComponent.vue

<template>
    <div class="container">
        <form>

            <div class="row mt-5 p-3">

            <ul v-if="errors.length && !submit">
                <li style="color:red" v-for="(error,index) in errors" :key="index">{{ error }}</li>
            </ul>
            <span v-else class="text-success">{{message}}</span>

                <div class="col-lg-6 mt-2">
                    <div class="form-group">
                        <label for="name">Name :</label>
                        <input id="name" class="form-control" type="text" placeholder="Name" v-model="user.name">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mt-2">
                        <label for="email">Email :</label>
                        <input id="email" class="form-control" type="email" placeholder="Email" v-model="user.email">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mt-2">
                        <label for="mobile">Mobile :</label>
                        <input id="mobile" class="form-control" type="number" placeholder="Mobile" v-model="user.mobile">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mt-4 pt-3">
                        <label for="address">Gender :</label>
                        <label class="mx-2">
                            <input class="form-radio" type="radio" name="gender" value="male" checked v-model="user.gender">
                            Male
                        </label>
                        <label class="mx-2">
                            <input class="form-radio" type="radio" name="gender" value="female" v-model="user.gender">
                            Female
                        </label>
                        <label class="mx-2">
                            <input class="form-radio" type="radio" name="gender" value="other" v-model="user.gender">
                            Other
                        </label>

                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group mt-2">
                        <label for="address">Address :</label>
                        <textarea class="form-control" id="address" rows="2" placeholder="Your Address..." v-model="user.address"></textarea>
                    </div>
                </div>
                <div class="form-group mt-2">
                    <button class="btn btn-success" @click.prevent="userCreate">Save</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>

import searchMixins from '../mixins/searchMixins'

export default {
    name:'ExampleComponent',

    data(){
        return {
            user:{
                name:'',
                email:'',
                gender:'male',
                address:'',
            },
            errors:[],
            submit:false,
            message:'',
        }
    },

    methods: {
        userCreate(){

            this.errors = []

            if(this.user.name == ''){
                
                this.errors.push('Please Enter Name');
            }

            if(this.user.email == ''){

                this.errors.push('Please Enter Email');
            }

            if(this.user.gender == ''){

                this.errors.push('Please Select Gender');
            }

            if(this.user.address == ''){

                this.errors.push('Please Enter your Current Location');
            }

            if(! this.errors.length){
                this.axios.post('https://fiery-artifact-307206-default-rtdb.firebaseio.com/My First Project.json',this.user).then((response) => {
                    
                    if(response.status == 200){
                        this.submit = true;
                        this.message = 'This is your user id ' + response.data.name
                    }
                });
            }
        }
    },
    mixins:[searchMixins]
}
</script>

So once i "save" the form, It will run the "userCreate" method from the script and first the validation check. If the validation has not failed then it will send this form data to the "firebase database API" and send the request to the firebase database with the "post" method.

After sending the post method to the firebase, The firebase API will respond to status and user id.

If the response is "ok" and successful then it will show a message of successfully user registered and that user registration id. this will appear at the top of the form successfully registered.


We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :