plugin to extend options vue.config.js

[cuijing1031]

What problem does this feature solve?

we have a plugin. This plugin will generate some data into vue.config.js when it is invoked. we can't put this data into package.json, because it depend on some modules. for example:

const path = require('path')
module.exports = {
   css: {
      extract: true,
      loaderOptions: {
        stylus: {
          'resolve url': true,
          import:  [path.resolve(__dirname, './src/theme')]
        }
      }
    }
}

if we use api.render to generate vue.config.js, it can work. But if another plugin generate vue.config.js, the old vue.config.js will be overwrited.

What does the proposed API look like?

maybe like api.injectImports and api.injectRootOptions

[Akryum]

Use api.extendPackage({ vue: {} }).

[cuijing1031]

@Akryum my config depend on some node modules. like import: [path.resolve(__dirname, './src/theme')]. if we put this in package.json, it won't work

[haoqunjiang]

For such usages, you don't need to explicitly extract these configs to vue.config.js.
See Service Plugin

[LinusBorg]

To me, it feels like we should not allow/encourage plugins to mess with the vue.config.js file.

This file is not a template, it's the config file for the cli and meant to hold options and customizations that users should do manually.

@cuijing1031 Can you explain your usecase? Why can't this logic be live in the plugin?

[Akryum]

vue.config.js should be used by plugins to expose settings:

module.exports = {
  pluginOptions: {
    myPlugin: { /* ... */ }
  }
}

It's okay to initialize those options there, for example if you have prompts for invocation.

[cuijing1031]

Because the final vue.config.js depends on prompts result. Full template of vue.config.js is:

<%_ if (theme) { _%>
const path = require('path')
<%_ } _%>
module.exports = {
  baseUrl: '/',
  productionSourceMap: false,
  css: {
    extract: true,
    loaderOptions: {
      stylus: {
        'resolve url': true,
        import: <%- theme ? `[path.resolve(__dirname, './src/theme')]` : `[]` %>
      }
    }
  },
 pluginOptions: {
    'myPlugin': {
     <%_ if (theme) { _%>
      theme: true<%_ } _%>
    }
  }
}

and when this plugin is called by vue-cli-service, it will use the 'theme' and 'css' config

[Akryum]

Don't do that, you will override user config.

[cuijing1031]

what's the correct method to generate this config? In this case, path.resolve isn't allow in package.json and template of vue.config.js will override user config

[Akryum]

See my previous comments. Also you can resolve the theme directory in your plugin. Why are you doing it in vue config?

[cuijing1031]

I got it. Thanks!

[Akryum]

👍

[jawa-the-hutt]

@Akryum If it's not recommended that we edit vue.config.js via a plugin initializing, what would be the recommended method to change the outputDir when a plugin initializes? Is there one, or would the user have to manually edit vue.config.js after the fact?

Specifically looking at making the outputDir dynamic based on the outcome of a conditional statement. Use case is regarding using the CLI 3 with NativeScript & Webpack and having the outputDir be determined by whether it is IOS or Android.

I have the rest of the templating worked out except for how to change the outputDir since we're only supposed to change this in vue.config.js