feat(ui): clientAddonConfig

Author: Guillaume Chau

docs/plugin-dev-ui.md

@@ -276,38 +276,14 @@ The recommended way to create a Client addon is by creating a new project using
 Then add a `vue.config.js` file with the following content:
 
 ```js
+const { clientAddonConfig } = require('@vue/cli-ui')
+
 module.exports = {
-  // Change the id here
-  baseUrl: '/_addon/<client-addon-id>',
-  // You can change the port here
-  devBaseUrl: 'http://localhost:8042/',
-  configureWebpack: {
-    output: {
-      // Important
-      filename: 'index.js'
-    }
-  },
-  // Don't extract CSS into a separate file
-  css: {
-    extract: false
-  },
-  // Remove unneeded webpack plugins
-  chainWebpack: config => {
-    config.plugins.delete('preload')
-    config.plugins.delete('prefetch')
-    config.plugins.delete('html')
-    config.plugins.delete('split-vendor')
-    config.plugins.delete('split-vendor-async')
-    config.plugins.delete('split-manifest')
-  },
-  // Configure dev server
-  devServer: {
-    headers: {
-      'Access-Control-Allow-Origin': '*'
-    },
-    // You can change the port here
+  ...clientAddonConfig({
+    id: '<client-addon-id>',
+    // Development port (default 8042)
     port: 8042
-  }
+  })
 }
 ```
 

packages/@vue/cli-ui-addon-webpack/vue.config.js

@@ -1,27 +1,8 @@
+const { clientAddonConfig } = require('@vue/cli-ui')
+
 module.exports = {
-  baseUrl: '/_addon/vue-webpack',
-  devBaseUrl: 'http://localhost:8042/',
-  configureWebpack: {
-    output: {
-      // Important
-      filename: 'index.js'
-    }
-  },
-  css: {
-    extract: false
-  },
-  chainWebpack: config => {
-    config.plugins.delete('preload')
-    config.plugins.delete('prefetch')
-    config.plugins.delete('html')
-    config.plugins.delete('split-vendor')
-    config.plugins.delete('split-vendor-async')
-    config.plugins.delete('split-manifest')
-  },
-  devServer: {
-    headers: {
-      'Access-Control-Allow-Origin': '*'
-    },
-    port: 8042
-  }
+  ...clientAddonConfig({
+    id: 'vue-webpack'
+    // port: 8042
+  })
 }

packages/@vue/cli-ui/index.js

@@ -0,0 +1,29 @@
+exports.clientAddonConfig = function ({ id, port = 8042 }) {
+  return {
+    baseUrl: `/_addon/${id}`,
+    devBaseUrl: `http://localhost:${port}/`,
+    configureWebpack: {
+      output: {
+        // Important
+        filename: 'index.js'
+      }
+    },
+    css: {
+      extract: false
+    },
+    chainWebpack: config => {
+      config.plugins.delete('preload')
+      config.plugins.delete('prefetch')
+      config.plugins.delete('html')
+      config.plugins.delete('split-vendor')
+      config.plugins.delete('split-vendor-async')
+      config.plugins.delete('split-manifest')
+    },
+    devServer: {
+      headers: {
+        'Access-Control-Allow-Origin': '*'
+      },
+      port
+    }
+  }
+}

packages/@vue/cli-ui/package.json

@@ -3,6 +3,7 @@
   "version": "3.0.0-beta.6",
   "author": "Guillaume Chau",
   "license": "MIT",
+  "main": "index.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",