[Vuejs]-Load a Package inside a Vuex Action only when it is dispatched

0👍

This should work.
https://webpack.js.org/guides/code-splitting/#dynamic-imports

export const actions = {
    async createNewBin(store, bin) {
        const { default: firebase } = await import(
            /* webpackChunkName: "firebase" */ 'firebase')

        // You may want code that checks if firebase is already initialized.
        // Unsure if initializing multiple times throws an error.
        firebase.initializeApp({
            // your init options
        });

        const collectionRef = firebase.firestore().collection('bins');

        try {
            const docRef = await collectionRef.add(bin);
            return docRef;
        } catch (e) {
            return e;
        }
    }
  }

0👍

Also you can find more detail about this approach here

How and when (not) to use webpack for lazy loading?

In general word the solution maybe like Eric answer with async/await

const { default: firebase } = await import(/* webpackChunkName: "firebase" */ 'firebase')

Or like this with Promise

if(iWantToLoadMyModule){
    import('myModule').then( myModule =>{
        // do something with myModule.default
    });
}

Leave a comment