Using vue config to extend the define plugin definition

Author: dushyant

src/store.js

@@ -6,12 +6,12 @@ Vue.use(Vuex);
 
 // firebase config.
 firebase.initializeApp({
-    apiKey: process.env.API_KEY,
-    authDomain: process.env.AUTH_DOMAIN,
-    databaseURL: process.env.DB_URL,
-    projectId: process.env.PROJECT_ID,
-    storageBucket: process.env.STORAGE_BUCKET,
-    messagingSenderId: process.env.MESSAGING_SENDER_ID,
+    apiKey: API_KEY,
+    authDomain: AUTH_DOMAIN,
+    databaseURL: DB_URL,
+    projectId: PROJECT_ID,
+    storageBucket: STORAGE_BUCKET,
+    messagingSenderId: MESSAGING_SENDER_ID,
 });
 
 const DATABASE = 'todo-list';

vue.config.js

@@ -0,0 +1,22 @@
+// vue.config.js
+module.exports = {
+    chainWebpack: config => {
+        config
+            .plugin('define')
+            .tap(options => {
+                const newOptions = options;
+                let existingDefs = newOptions.pop();
+                existingDefs = Object.assign(existingDefs, {
+                    API_KEY: JSON.stringify(process.env.API_KEY),
+                    AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN),
+                    DB_URL: JSON.stringify(process.env.DB_URL),
+                    PROJECT_ID: JSON.stringify(process.env.PROJECT_ID),
+                    STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET),
+                    MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID),
+                });
+                newOptions.push(existingDefs);
+
+                return newOptions;
+            })
+    },
+};