Can anyone give an example of a usecase that justifies how prefetch feature in quasar different from vue native navigation guards like beforeRouteEnter and lifecycle hooks like beforeMount, mounted etc.

@metalsadman @dobbel thanks

@dobbel i have already looked into that post it explains how to use store in “index.js” file and not in “routes.js” file which gets imported into index.js file

I have a typical routes.js file like this and i cannot access the store.even i am able to dispatch an action for the store by accessing store given below but still store state is not updated?Why? Thus instead of doing this way i removed routes.js file and then in index.js i was able to update store.

import store from '../store';
import {userPortfolio} from '../dummy';

const routes = [{
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [{
        name: 'Home',
        path: '',
        component: () => import('pages/Home.vue')
      },
      {
        name: 'Devices',
        path: 'devices',
        component: () => import('pages/Devices.vue')
      },
      {
        name: 'FirmwaresOverview',
        path: 'firmwaresOverview',
        component: () => import('pages/FirmwaresOverview.vue')
      },
      {
        name: 'Firmwares',
        path: 'firmware/:id',
        props: true,
        component: () => import('pages/Firmware.vue')
      },
      {
        name: 'Feedback',
        path: 'feedback',
        component: () => import('pages/Feedback.vue')
      }
    ],
    beforeEnter(to,from,next){
      // Make Api Call and populate store:
      // Apicall.then(data=>{
      //   store().dispatch("common/initializeData",data)
      // })

      // Dummy data
      store().dispatch("common/initializeData",userPortfolio);
      next();
    }
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]


export default routes

Improvised index.js file :

import Vue from 'vue'
import VueRouter from 'vue-router'
import {userPortfolio} from '../dummy';

// import routes from './routes'

const defaultPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return defaultPush.call(this, location).catch(err => err)
};



Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default function ( { store } ) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes:[{
      path: '/',
      component: () => import('layouts/MainLayout.vue'),
      children: [{
          name: 'Home',
          path: '',
          component: () => import('pages/Home.vue')
        },
        {
          name: 'Devices',
          path: 'devices',
          component: () => import('pages/Devices.vue')
        },
        {
          name: 'FirmwaresOverview',
          path: 'firmwaresOverview',
          component: () => import('pages/FirmwaresOverview.vue')
        },
        {
          name: 'Firmwares',
          path: 'firmware/:id',
          props: true,
          component: () => import('pages/Firmware.vue')
        },
        {
          name: 'Feedback',
          path: 'feedback',
          component: () => import('pages/Feedback.vue')
        }
      ],
      beforeEnter(to,from,next){
        // Make Api Call and populate store:
        // Apicall.then(data=>{
        //   store().dispatch("common/initializeData",data)
        // })
  
        // Dummy data
        store.dispatch("common/initializeData",userPortfolio);
        next();
      }
    },
  
    // Always leave this as last one,
    // but you can also remove it
    {
      path: '*',
      component: () => import('pages/Error404.vue')
    }
  ],

    // Leave these as they are and change in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
}

thanks @s-molinari and @tof06

@s-molinari we can acheive the same by specifying dropdown-icon=" " as a prop but the actual problem is how to get rid of the space occupied by it, the space is still there .Actually i am trying to center the label on the button

@metalsadman after too much trouble i was finally able make it work BUT for only response error like 429 which was specific to a third party news api on the other hand i am using firebase auth (REST) to authenticate user if a user puts a invalid password then an error response is sent back by firebase and i am trying to catch that here in the interceptor ( error like 420 ) but its still not getting caught by the interceptor is this problem specific to firebase or what?

i have the following code

import Vue from 'vue'
import axios from 'axios'
import {Notify} from 'quasar'

const instance=axios.create({
  baseURL:"http://newsapi.org/v2",
  params:{
    apiKey:"//someKey"
  }
});

instance.interceptors.response.use((config)=>config,error=>{
  
  if(error.response.status==400)
  Notify.create({
    type:"negative",
    message:"Hello there!"
  });
  
});

Vue.prototype.$axios = instance;

I dont know why but the interceptor is not even triggered on any response i checked this by logging text to console in first as well as in second parameter’s body.

Newbie here , i want to show skeleton in place of content till the get request returns content this usecase is basically perhaps replication of showing a loading spinner before content loads but i was wondering if my approach is correct here’s what i am doing:
I dispatch action on the app.vue created hook to asynchronously fetch data from api and then mutate the state to populate some articles.
Then in Index.vue component i call the getter to get the articles but the problem is the getter returns Observer object and doesnt return articles and this makes sense because the api request takes time to return data so here’s how i get around this problem:

//Index.vue
<q-card class="card-height-lg" flat square>
          <q-skeleton v-if="!dataFetched" class="quasar-skeleton-lg" square>{{articles}}</q-skeleton>
          <span v-else>{{articles[0].content}}</span>
          <span></span>
          <span></span>
        </q-card>

//script section
export default {
  data(){
    return{
      dataFetched:false
    }
  },
  computed:{
    currentFormatDate:function(){
      var unformated=new Date();
      var day=unformated.toDateString().split(' ')[0];
      return unformated.toDateString().replace(day,`${day},`);   
    },
    articles:function(){
      var articles=this.$store.getters.getTopAroundTheGlobe;
      if(articles.length>0)
      {
        this.dataFetched=true;
        return articles;
        console.log(articles);
      }
        
    }
  }
}

Thanks @jraez and @tof06