Vue-cli: Allow router/vuex to be late-added

[jmcooper]

Version

3.0.0-beta.6

Reproduction link

CLI issue, no code necessary

Steps to reproduce

1. Install vue cli 3 beta 6
2. vue create my-project
   2a. Do NOT install router
3. vue add @vue/router

What is expected?

That it will add the router configuration/dependencies that would have been added if I selected the router from the initial install.

What is actually happening?

No vue router plugin is found so the vue add @vue/router command fails.

[p-adams]

I could be mistaken, but I think vue add @vue/pluginname command only works with those plugins prefixed with cli-plugin- here: https://github.com/vuejs/vue-cli/tree/11956acb4d4d9dc287ce3bb7249d92734ae22a43/packages/%40vue

[jmcooper]

Yeah, @p-adams, that's also what I would expect, but the point of this issue was to suggest that perhaps there should be one there for @vue/router since it's included as an option in the the original cli install -- same with Vuex. It seems to me that if I can choose those options during the initial install I should be able to add them easily later if I choose not to when I first install. So it'd be nice if I could just do a vue add @vue/router or vue add @vue/vuex.

[dhensche]

Another point about vuex/vue-router are that those are not vue-cli plugins. I believe to add those after project creation you would just want to run yarn install vue-router or npm install --save vue-router. Because these libraries are so tightly coupled to Vue (and there are a couple files generated when added via the vue create CLI call) it may be nice to support adding them via the CLI as well as the standard process of using your preferred node package manager

[LinusBorg]

The point is that adding these libraries with the same generated code after the initial setup will be very brittle.

Assuming that people illl have made some changes to the initially created files, adding stuff to them later is either very complicated to get right or very likely to break your existing code because the generated code doesn't work with the changes you already made.

And a plugin that doesnt add any files does not have any advantage over a simple npm install.

[Akryum]

@LinusBorg As the progressive framework, we should expect users not to install vue-router or vuex right away and to want to add them later - IMHO.

The point is that adding these libraries with the same generated code after the initial setup will be very brittle.

I think most third-party plugins will attempt to modify user code anyway (and are already doing so). So why not official ones? Also, if the user changes his code too much, it's OK to assume he will be on is own to integrate those libs into it. You can display a warning message, for example: api.exitLog('"main.js" not found, follow <link to vue-router usage> instructions to add vue-router to your code.', 'warn')

And a plugin that doesnt add any files does not have any advantage over a simple npm install.

Yes it can, for example modifying the webpack config or adding new cli-service commands.

[jim-cooper]

@LinusBorg I can see how it might be brittle and in the case of vuex and the router I can also see how this is simple enough for the user to just install manually. However, as it relates to the vue add ... command, I'm curious why you find these cases more brittle than any other plugin that is added post-install.

Finally, in the case of vuex and the router, both of these do add files (a store and routes) and modify things like the Vue instance so they are not a simple npm install (although, admittedly, just barely more than an npm install).

[jim-cooper]

I think one reason why I initially expected these plugins to exist was because in this talk @19:55 by Evan You, he mentioned that all of the features selected during initial install are plugins, so I was surprised to see that the router and vuex were not available as plugins. I presume that behind the scenes they're already implemented as plugins, but they're just not published for use as plugins separately? Or is that not the case?

[dhensche]

That is not the case right now. The vuex and vue-router features would have to be re-written as plugins. Currently they are installed and the files generated as part of the cli-service depending on the selected features when creating a new project, not as separate plugins

see https://github.com/vuejs/vue-cli/blob/69a6b0bbfe9f844d4101a77f5edf5b8236970b2d/packages/%40vue/cli-service/generator/index.js#L33 for adding the dependency to the package.json or https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/generator/template/src/router.js for one the related generated files

[Akryum]

Best way would be extract them as two different plugins that could be installed later.

[yyx990803]

The logic for adding vuex/router is already contained in vue-cli-service, so we don't need to (and shouldn't) make them separate packages. Maybe they can be extracted into internal plugins that can be "added virtually" added when you run vue add router...

[dhensche]

would the virtual addition just be adding the dependencies to package.json and installing them? I'm not sure how you would 'merge' in the file changes (like importing vuex/vue-router and then adding them to the root Vue instance in the main.js file) because an end user could have completely altered the original structure from the template

[jim-cooper]

While I completely understand the fragility concerns about applying a plugin after a project has been created and the developer has made changes, the concerns expressed about it make me realize (or at least worry) that the plugin architecture isn't quite as much a silver bullet as I had hoped. I hadn't really thought through the challenges of plugins modifying files that could have changed since initial install. It seems like there had been some talk along the lines of, "Don't worry if you don't know everything you need when you first create a project, you can always add features via plugins later." Do you think that is generallyl overly optimistic and does that mean we need to be encouraging users to figure out which plugins they need (such as pwa, typescript etc) at (or immediately after) initial project creation? I assume those plugins and many other future plugins will suffer from the same concerns as vuex/router?

[yyx990803]

@jim-cooper most built-in plugins are designed with late installation in mind. Just that vuex and router aren't, because in most cases people know whether they need them or not beforehand.

[jmcooper]

Ok, that makes sense and is good to know, thank you.

On Tue, May 1, 2018, 4:22 PM Evan You [e-mail] wrote:

@jim-cooper https://github.com/jim-cooper most built-in plugins are
designed with late installation in mind. Just that vuex and router
aren't, because in most cases people know they need them or not beforehand.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-cli/issues/1202#issuecomment-385808159, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABb4k8Bf0XUC68rn6BBAqs5O62EtD6Wzks5tuN_5gaJpZM4TtY-c
.

[yyx990803]

After thinking about this I don't think this really warrants the complexity it can lead to.

• Late-adding router when you've already modified the entry file is extremely fragile.
• If you haven't modified the file much, you can just re-generate the project instead.
• If we only add the dependency and skip the file-modifying part, then it's easier to just npm install vue-router or yarn add vue-router;

Edit: some parts of this might be useful for other plugins as well so I'll spend a bit more time on this.