Let me rephrase this… it does not load the settings each time or it would be a waste of resources, it only fetches via the api the settings if 1 of the setting is missing in the localstorage as shown here:

fetchGlobalSettingsFromApi(context) {

            if (localStorage.getItem('homepage_title') === null
                || localStorage.getItem('homepage_description') === null
                || localStorage.getItem('homepage_keywords') === null
                || localStorage.getItem('gdpr') === null
                || localStorage.getItem('newsletter') === null
                || localStorage.getItem('admin_email') === null) {

                api.get('/loading')
                    .then(response => {

                        let homepage_title = response.data.data[0].homepage_title;
                        let homepage_description = response.data.data[0].homepage_description;
                        let homepage_keywords = response.data.data[0].homepage_keywords;
                        let gdpr = response.data.data[0].gdpr;
                        let newsletter = response.data.data[0].newsletter;
                        let admin_email = response.data.data[0].admin_email;

                        context.commit('fetchGlobalSettingsFromApi', {
                            homepage_title,
                            homepage_description,
                            homepage_keywords,
                            gdpr,
                            newsletter,
                            admin_email
                        });
                    })
                    .catch(error => {
                        if (error.response.status < 500) {
                            context.commit('apiErrorMessage', error);
                        } else {
                            context.commit('noServerError');
                        }
                    });
            } else {

                let homepage_title = localStorage.getItem('homepage_title');
                let homepage_description = localStorage.getItem('homepage_description');
                let homepage_keywords = localStorage.getItem('homepage_keywords');
                let gdpr = localStorage.getItem('gdpr');
                let newsletter = localStorage.getItem('newsletter');
                let admin_email = localStorage.getItem('admin_email');

                context.commit('fetchGlobalSettingsFromApi', {
                    homepage_title,
                    homepage_description,
                    homepage_keywords,
                    gdpr,
                    newsletter,
                    admin_email
                });

            }
        }

You may need to adjust the actions if you use modules as this way for a Vue/Vuex project with a single store.js file. But the way I did it is stick the below routerBackup code to the bottom of my router.js file(right to the bottom). And then add the subsequent code into my actions and mutations + states one by one.
It enabled me to reload the data in the app each time the browser is shut. I have also noticed the issue you describe where certain details are not updating on time when used in certain .js files, This is why I used the below method, no more issues. The actions are asynchronous so no worry. If anyone has a better way of doing it, you are welcome to post it.

routerBackup.beforeEach((to, from, next) => {
    store.dispatch('resetErrors');
    store.dispatch('fetchGlobalSettingsFromApi'); // Very important part

    let role = localStorage.getItem('rid');
    let accessToken = localStorage.getItem('accessToken');

    if (to.meta.requiresAuth) {
        if (!role || !accessToken) {
            routerBackup.push({path: '/login'});
        } else {
            if (to.meta.adminAuth) {
                if (role === "admin") {
                    return next();
                } else {
                    routerBackup.push({path: '/login'});
                }
            } else if (to.meta.customerAuth) {
                if (role === "customer") {
                    return next();
                } else {
                    routerBackup.push({path: '/customer'});
                }
            } else if (to.meta.userAuth) {
                if (role === "user") {
                    return next();
                } else {
                    routerBackup.push({path: '/user'});
                }
            }
        }
    } else {
        return next();
    }

});

export default routerBackup;

In my store, my fetchGlobalSettingsFromApi actions look like this:

    //FETCH GLOBAL SETTINGS

        fetchGlobalSettingsFromApi(context) {

            if (localStorage.getItem('homepage_title') === null
                || localStorage.getItem('homepage_description') === null
                || localStorage.getItem('homepage_keywords') === null
                || localStorage.getItem('gdpr') === null
                || localStorage.getItem('newsletter') === null
                || localStorage.getItem('admin_email') === null) {

                api.get('/loading')
                    .then(response => {

                        let homepage_title = response.data.data[0].homepage_title;
                        let homepage_description = response.data.data[0].homepage_description;
                        let homepage_keywords = response.data.data[0].homepage_keywords;
                        let gdpr = response.data.data[0].gdpr;
                        let newsletter = response.data.data[0].newsletter;
                        let admin_email = response.data.data[0].admin_email;

                        context.commit('fetchGlobalSettingsFromApi', {
                            homepage_title,
                            homepage_description,
                            homepage_keywords,
                            gdpr,
                            newsletter,
                            admin_email
                        });
                    })
                    .catch(error => {
                        if (error.response.status < 500) {
                            context.commit('apiErrorMessage', error);
                        } else {
                            context.commit('noServerError');
                        }
                    });
            } else {

                let homepage_title = localStorage.getItem('homepage_title');
                let homepage_description = localStorage.getItem('homepage_description');
                let homepage_keywords = localStorage.getItem('homepage_keywords');
                let gdpr = localStorage.getItem('gdpr');
                let newsletter = localStorage.getItem('newsletter');
                let admin_email = localStorage.getItem('admin_email');

                context.commit('fetchGlobalSettingsFromApi', {
                    homepage_title,
                    homepage_description,
                    homepage_keywords,
                    gdpr,
                    newsletter,
                    admin_email
                });

            }
        }

Mutation:

fetchGlobalSettingsFromApi(state, data) {

            let homepage_title = data.homepage_title;
            let homepage_description = data.homepage_description;
            let homepage_keywords = data.homepage_keywords;
            let gdpr = data.gdpr;
            let newsletter = data.newsletter;
            let admin_email = data.admin_email;

            localStorage.setItem('homepage_title', homepage_title);
            localStorage.setItem('homepage_description', homepage_description);
            localStorage.setItem('homepage_keywords', homepage_keywords);
            localStorage.setItem('gdpr', gdpr);
            localStorage.setItem('newsletter', newsletter);
            localStorage.setItem('admin_email', admin_email);

            state.homepage_title = localStorage.getItem('homepage_title');
            state.homepage_description = localStorage.getItem('homepage_description');
            state.homepage_keywords = localStorage.getItem('homepage_keywords');
            state.gdpr = localStorage.getItem('gdpr');
            state.newsletter = localStorage.getItem('newsletter');
            state.admin_email = localStorage.getItem('admin_email');

            state.isLoggedIn = localStorage.getItem('isLoggedIn');
            state.accessToken = localStorage.getItem('accessToken');
            state.refreshToken = localStorage.getItem('refreshToken');
            state.rid = localStorage.getItem('rid');
            state.name = localStorage.getItem('name');

        },

I scratch ed me head for days on this and finally used this method, and now I have a “settings” area in my admin account where I load all my settings which are sent to my laravel app. Each time the app loads a page it checks for the settings. I did not notice any slowdown and the app is really fast.

No idea if this is an ideal way of doing it but it worked great on my project.

@metalsadman, thanks, I checked it but it does not help me as I am using Quasar as a Web client with a third party Websocket.

Problem for me is that I am only using the Web app(not electron) and the websocket is received from a third party(different domain)

I honestly do not know what I am doing wrong, any suggestion would be great please.

In my boot file:

import io from 'socket.io-client';

export default async ({ Vue }) => {
  Vue.prototype.$mysocket = await io('wss://wwwebsite/testing');
};


 data () {
    return {
      socket: this.$mysocket
    };
},
  mounted () {
    this.socket.on('connect', function () {
      console.log('Your socket is connected!');  //NO EFFECT, NOT WORKING AT ALL, NO CONSOLE LOG
    });
  },
methods: {

    onLogin () { //No effect either.
      this.socket.on({
        "firstname": "firsname", 
        "email": "email",
      })
    },

No errors, nothing happening when I try to connect,

Any idea why please?

I am using Quasar v1, thank you.

same for me, it is driving me crazy

Hello,

I am not understanding the issue.

The Q table headers are not translating. It is very strange because if I add $t(‘tables.surname’) to the template layout, it works on the fly, I can change the languages without any issues but as soon as I add this.$t(‘tables.surname’) in my columns object, the reactivity is not there. Any idea why, please?
I thought perhaps I needed to add it to a computed property but is it possible to add an object as computed? If yes would you have an example please? Thank you.

<template>
<div>
    <q-table :data="data" :columns="columns" row-key="name" :pagination.sync="pagination">
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="name" :props="props">{{ props.row.name }}</q-td>
          <q-td key="surname" :props="props">{{ props.row.surname }}</q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</div>
</template>

<style scoped>
</style>

<script>
export default {
  data () {
    return {
      pagination: {
        rowsPerPage: 0,
        page: 1
      },
      selected: [],
      columns: [
      {
        name: 'name',
        align: 'center',
        label: this.$t('tables.name'),
        field: 'name',
        sortable: true
      },
      {
        name: 'surname',
        align: 'center',
        label: this.$t('tables.surname'),
        field: 'surname',
        sortable: true
      }
      ],
      data: [{
        name: 'Name1',
        surname: 'name 1',
      },
     {
      name: 'Name2',
      surname: 'name 2'
      }
      ]
    }
  }
};
</script>

Hello,

Yes it was me

Thank you so much, this is exactly what I was looking for, brilliant!

Hello,

I would like to have 2 colors in a toggle button but could not find any help in the api, any idea what is the best way of doing this please?

ie:

Left & right
When the button is on the left, it should be red and when the toggle is moved to the right, it should be green.

<q-btn-toggle
        v-model="props.row.state"
        push
        glossy
        :options="[
          {label: 'LEFT', value: 'left'},
          {label: 'RIGHT', value: 'right'},
        ]"
      />
          </q-td>

Thanks.

Hello,

I would like to know if anyone has ever tried this plugin with Quasar:
[https://www.npmjs.com/package/vue-socket.io-extended](link url)

If yes would you have a good example on how to set it up please?
For now I have created a boot file with:

import VueSocketio from 'vue-socket.io-extended';
import io from 'socket.io-client';
import store from '../store';

// "async" is optional

export default async ({ Vue }) => {
  Vue.use(VueSocketio, io('wss://echo.websocket.org'), { store });
};

I am not sure on how to integrate a basic send/receive using Vuex,
if you have an example it would be great thank you.