Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue config async support #3328

Open
nickforddesign opened this issue Jan 18, 2019 · 6 comments

Comments

Projects
None yet
2 participants
@nickforddesign
Copy link

commented Jan 18, 2019

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

This comment has been minimized.

Copy link
Member

commented Jan 19, 2019

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"
}
@nickforddesign

This comment has been minimized.

Copy link
Author

commented Jan 21, 2019

Awesome, I had worked around it with a prebuild npm hook but that required saving the data to the filesystem, your solution is a bit cleaner, thank you.

@nickforddesign

This comment has been minimized.

Copy link
Author

commented Jan 21, 2019

@LinusBorg is there any official documentation for this api? I noticed that the build output from your example is significantly different that the output of vue-cli-service build and would like to read more about it.

@LinusBorg

This comment has been minimized.

Copy link
Member

commented Jan 21, 2019

The build command itself is completely the same, but of course the pretender plugin changes behaviour.

What differences do you see?

As far as documentation goes, the Plugin dev guide is not as fleshed out yet as we want it to be, but the basics can be found there.

The bit about a local plugin is found in the guide under plugins & presets -> local plugin

@nickforddesign

This comment has been minimized.

Copy link
Author

commented Jan 21, 2019

Thank you, I'll take a look. I figured out why the output was different, NODE_ENV was undefined 💯.

What is the best way to deal with that? Seems like vue-cli-service build automatically sets the environment to production, do I have to set the env variable in the npm script manually?

Edit: Asked prematurely, found the answer here https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin

@LinusBorg

This comment has been minimized.

Copy link
Member

commented Jan 21, 2019

Oh right, forgot to add a default mode for the command. Sorry.

I'll fix my example code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.