About.vue

<template>
  <div class="container my-5 about">
    <div class="row">
      <div class="container text-center mt-5" style="height:50vh" v-if="$store.state.loading">
            <b-spinner class="align-middle mt-5 pt-5" style="width: 3rem; height: 3rem;" label="Large Spinner" variant="primary" type="grow"></b-spinner>
      </div>
      <div v-if="!loading" class="container" >
        <div class="row">
          <div class="col-md-12 text-center" v-for="(item, index) in $store.state.about" :key="index" >
        <h1>Who we are</h1>
        <div v-html="item"></div>
        
      </div>
      </div>
      </div>
    
    </div>
  </div>
</template>

App.vue

<template>
  <div id="app">
    <div id="nav"> 
     <Navbartwo/> 
    </div>
   <div class="container-fluid">
    <vue-page-transition name="fade">
      <router-view/>
    </vue-page-transition>
   </div>
   <Footerlast/>
  </div>
</template>



<script>
import Navbartwo from '@/components/Navbartwo.vue'
import Footerlast from '@/components/Footerlast.vue'
import { about } from './firebaseConfig.js'
export default {
  components: {
    Navbartwo,
    Footerlast
  },
  created(){
    // get the coaching items   
        let aboutus = about.get()
        .then(snapshot => {
            snapshot.forEach(doc => {
            this.$store.state.about = doc.data()
            console.log(doc.id, '=>', doc.data());
            });
            this.$store.state.loading = false
        })
        
        .catch(err => {
            console.log('Error getting documents', err);
        });
  }
}
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
body{
  background-color: #F7F8FC!important;
  color: #091E42!important;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
}
.primary{
  background-color: rgb(3, 3, 3)!important;
}
.container-fluid {
    width: 100%;
    padding-right: 0px!important;
    padding-left: 0px!important;
}
</style>

store,js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: true,
    about: null
  },
  mutations: {

  },
  actions: {

  }
})