Vue config async support

What problem does this feature solve?

Allow for asynchronous actions within vue.config.js. The specific use-case I’m looking at right now is the need to prerender dynamic routes based on data returned by an api. I’m found a few things online but nothing that appears to work with vue cli 3.x

What does the proposed API look like?

Await the result of the configureWebpack or chainWebpack methods:

const path = require('path')
const axios = require('axios')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: async () => {
    const { data } = await axios.get('http://some-api.com/companies')
    const { companies } = data
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // Required - The path to the webpack-outputted app to prerender.
          staticDir: path.join(__dirname, 'dist'),
          // Required - Routes to render.
          routes: [ '/' ].concat(companies.map(company => `/companies/${company}`))
        })
      ]
    }
  }
}

[LinusBorg]

That could make sense, but would also be a lot of work and possibly a breaking change. We will have to have a thorough look at this.

Meanwhile, you can use a local plugin file to write your own wrapper around build and do the async fetching before actually running build:

package.json:

"vuePlugins": {
  "service": ["build.prerender.js"]
  }

build.prerender.js

module.exports = (api, options) => {
  api.registerCommand('build:prerender', async (args) => {
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const { data } = await axios.get('http://some-api.com/companies')
    const { companies } = data
    api.chainWebpack(config => {
      config.plugin('prerender').use(PrerenderSPAPlugin, [{
          // Required - The path to the webpack-outputted app to prerender.
          staticDir: path.join(__dirname, 'dist'),
          // Required - Routes to render.
          routes: [ '/' ].concat(companies.map(company => `/companies/${company}`))
        }])
    })
    
    await api.service.run('build', args)
  })
}

module.exports.defaultModes = {
  'build:prerender': 'production'
}

Usage in package.json:

"scripts": {
  "build": "vue-cli-service build:prerender"
}

[patarapolw]

If need both build:async and serve:async, currently, I have to… (in vue.async.config.js)

function configureWebpack(webpackConfig) {
  ...
}

function defineWebpack(webpackConfig, def) {
  webpackConfig.plugin("define").tap((args) => {
    args[0] = {
      ...args[0],
      ...def
    }
    return args;
  });
}

async function generateDefinitions() {
  await ...
}

module.exports = (api, options) => {
  api.registerCommand('build:async', async (args) => {
    const def = await generateDefinitions();

    api.configureWebpack(configureWebpack);
    api.chainWebpack((webpackConfig) => {
      defineWebpack(webpackConfig, def);
    });
    
    await api.service.run('build', args)
  }),
  api.registerCommand('serve:async', async (args) => {
    const def = await generateDefinitions();

    api.configureWebpack(configureWebpack);
    api.chainWebpack((webpackConfig) => {
      defineWebpack(webpackConfig, def);
    });

    await api.service.run('serve', args)
  })
}

module.exports.defaultModes = {
  'build:async': 'production',
  'serve:async': 'development'
}

There should be a single Vue Config object, therefore, a more elegant way to do this…