Nuxt.js: Start loading indicator from vuex

3
votes

According to documentation, there is a way to manually start the nuxt loading indicator in a component as such:

export default {
    methods: {
        startLoading() {
            this.$root.$loading.start();
        },
    },
}

Is there any way to toggle the loader from a vuex action? How can I access the $root object from a vuex action?

1
vue.jsvuexnuxt.js

1 Answers

6
votes

Sweet! Apparently it can be accessed through the window property which is available on client. It would be advisable to confirm that the action is run on the client, not on server, by checking process.browser:

export const actions = {
    startLoading({ commit }) {
        if (process.browser) {
            window.$nuxt.$root.$loading.start();
        }
        commit('SET_LOADING', true);
    },
    finishLoading({ commit }) {
        if (process.browser) {
            window.$nuxt.$root.$loading.finish();
        }
        commit('SET_LOADING', false);
    },
}

Pretty cool. The actions are called from axios interceptors, so now it indicates loading globally when making any request to the server.