diff --git a/webpack.common.js b/webpack.common.js
index 8f007df20..63a5142bb 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -38,7 +38,14 @@ module.exports = {
             },
             {
                 test: /\.vue/i,
-                use: 'vue-loader',
+                use: {
+                    loader: 'vue-loader',
+                    options: {
+                        compilerOptions: {
+                            isCustomElement: (tag) => tag === 'center',
+                        },
+                    },
+                },
             },
         ],
     },
diff --git a/webpack.dev.js b/webpack.dev.js
index 84301c1f4..dd55f125e 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -4,6 +4,7 @@
 const path = require('path');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
+const webpack = require('webpack');
 
 module.exports = merge(common, {
     mode: 'development',
@@ -18,4 +19,10 @@ module.exports = merge(common, {
             overlay: false,
         },
     },
+    plugins: [
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__: false,
+            __VUE_PROD_DEVTOOLS__: true,
+        }),
+    ],
 });
diff --git a/webpack.prod.js b/webpack.prod.js
index 52c9b416f..00d9840ab 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -4,6 +4,7 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = merge(common, {
     mode: 'production',
@@ -11,4 +12,10 @@ module.exports = merge(common, {
         // Inject a CSS minimizer alongside the default JS minimizer (the '...' is the inclusion of the default webpack JS minimizer!)
         minimizer: [new CssMinimizerPlugin(), '...'],
     },
+    plugins: [
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__: false,
+            __VUE_PROD_DEVTOOLS__: false,
+        }),
+    ],
 });