Add webpack changes

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -27,7 +27,7 @@
           :show-popout-button="appConfig.showPopoutButton"
         />
         <chat-header
-          v-if="isHeaderCollapsed"
+          v-else-if="isHeaderCollapsed"
           :title="channelConfig.websiteName"
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"

config/webpack/environment.js

@@ -23,6 +23,14 @@ environment.loaders.append('audio', {
   },
 });
 
+environment.config.merge({
+  resolve: {
+    alias: {
+      vue: '@vue/compat',
+    },
+  },
+});
+
 environment.config.merge({ resolve });
 environment.config.set('output.filename', chunkData => {
   return chunkData.chunk.name === 'sdk'

config/webpack/loaders/vue.js

@@ -1,6 +1,13 @@
 module.exports = {
   test: /\.vue(\.erb)?$/,
   use: [{
-    loader: 'vue-loader'
-  }]
-}
+    loader: 'vue-loader',
+    options: {
+      compilerOptions: {
+        compatConfig: {
+          MODE: 2,
+        },
+      },
+    },
+  }],
+};

vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  chainWebpack: config => {
+    config.resolve.alias.set('vue', '@vue/compat');
+
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => {
+        return {
+          ...options,
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        };
+      });
+  },
+};