feat(ui): clientAddonConfig

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",