Vue-cli: Feature: Local Plugins

[mwaldstein]

What problem does this feature solve?

We have a number of complex, tightly coupled build processes which take advantage of direct access to the webpack config and starting development servers. In looking to migrate to vue-cli, we don't have the same access without being a plugin which are only loaded via package dependencies. The proposal is to specify local plugins, specific to the project.

While for our case it would be for adding adding commands, we also see the benefit in being able to provide per-project UI add-ons.

Alternatives:

• Using a file dependency in package.json - What we'll likely do w/out this feature. e.g. have a dependency of 'vue-cli-plugin-OurPlugin': 'file: local/path'. Downside is the need to ensure that npm -i is called prior to any use to keep the copy in node-modules up to date.
• Splitting code into a separate module and use a git dependency - Besides being a much heavier lift and re-architecting (not wrong, just not feasible at the moment), this is project specific code that doesn't make sense to be separated.
• Abuse of vue-cli-service inspect - Saving webpack config to a temp file to run dev server, etc.

What does the proposed API look like?

A vue.config.js field -

local-plugins: {
  my-plugin: 'path/relative/to/package.json',
}

Implementation Notes

I can create a PR with a basic implementation, but would like to make sure it is the right approach first.

Approach: Add a function to init to concat local plugins here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js#L72

[Akryum]

Note that you can already have per-project UI addons with the vue-cli-ui.js file like stated in the docs.

[Akryum]

Maybe we could have a similar approach, if there is a vue-cli.js file in the project we treat it as a plugin index.js and from there you are free to require any node modules and pass along the api.

[LinusBorg]

Someone could write a plugin that loads and runs "local plugins" and publish it on npm :-P

That way we would not need to "bloat" core with it.

[Akryum]

Since we have it for the UI, I think it makes sense to have it for the cli-service as well.

[Akryum]

It's already done anyway 😹

[LinusBorg]

If we do it, let's not create another config file though. I think providing a path in a config option in vue.config.js should be enough.

[LinusBorg]

Oh - too late 😂

[mwaldstein]

Holy cow, you guys are impressive - I was all ready to spend some time doing the work and creating a PR... and it's done before I brew another cup of coffee...

Brainstorming a bit: are there other plugin features worth exposing locally? As @LinusBorg points out, there can be a lot of pieces and don't want to litter root too much. Thinking of potential of using the concept of generators to update filetypes - no immediate need, just thinking through impacts...

[Akryum]

If you need generator capabilities, it's better to do a plugin (you can even create private scopes on npm for your company).

[Akryum]

I changed the API to a vuePlugins.service option in package.json: https://github.com/vuejs/vue-cli/commit/08352811e08a4136edf8f1c931edc6ddf249fb6b#diff-1a6db9047a9cbf03d3f2efd495a8506fR80

[marcus30]

If you need generator capabilities, it's better to do a plugin (you can even create private scopes on npm for your company).

Is it possible to access the GeneratorAPI through the service or would you need to invoke the plugin each time you needed generator capabilities? Something like vue-cli-service generate --component would be outstanding.