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

v3.0 Roadmap #963

shentao opened this Issue Apr 6, 2019 · 2 comments


None yet
2 participants
Copy link

shentao commented Apr 6, 2019

Vue-Multiselect v3 Roadmap

Reasoning for the v3 Rewrite

The current 2.x version has become pretty complicated, especially on the template side. The way it currently behaves, makes it very hard to implement any accessibility improvements. Additionally, it limits the customisation options, especially on the interaction part. Adding more slots and props is sadly not a reliable long-term solution, since it will lead to further increased complexity and thus making it even harder to maintain.

Goals for the Rewrite AKA the New Architecture

The idea behind v3 is to simplify the library by breaking it apart into smaller, self-contained components responsible for fragments of the functionality (like options list, input, container, selected options), which can be replaced with developer-provided components for more control. To accomplish this, the whole “logic” part has to be extracted into an unopinionated UI-free component. This can be done by constructing a renderless component that exposes its state and methods to child components through scoped slots.

Then, the renderless component along with the smaller components can be composed and wired together to form the component that is required be the developer.

This should make it possible for developers to have almost complete control over the component and add their own functionalities on top of it, without requiring any changes within the library itself. This should lower the amount of feature-requests and thus help reduce feature-creep.

For example, you will be able to put a searchable table inside the dropdown. Or not have a dropdown at all and make it permanently open.

Here’s the visualization of the new architecture.

If this looks complicated to you – don’t worry. To keep the same, easy-to-use/just-works experience known from the current 2.x version, the rewrite will also ship with a default composition that mimics the current feel and look as well as API interface you got used to. That means, as long as you import the component import VueMultiselect from ‘vue-multiselect, you will use the that default composition.

This brings us to the breaking changes / migration part.

Breaking Changes / Migration from v2.x

Due to shipping with a pre-existing, default composition that mimics the current look and feel of the v2, there shouldn’t be that many breaking changes when migrating to the new version. Ideally, you should be able to just bump the package version and everything should work as it did, as long as you used the most popular features.

Possible breaking changes

  • Advanced features that could be easily implemented on top of the new architecture, that when removed from the library core could hugely simplify its internals. (I look at you option groups)
  • Slight changes to props, events emitted and slots that could improve the overall developer experience and flexibility.
  • Changes in the UX of the component.
  • Changes to the internals of the library. Relying on them right now might require further changes in your code.


All the changes are available on the v3 branch for you to try out.

  • Extracting the functionality into a set of smaller, presentation components and a renderless component that controls them all.
  • Move some of the functionalities to those smaller components, if they are opinionated and specific to the default composition and would hinder the customization when using the renderless component.
  • Removal of the features that would hinder users from fully customizing the user experience.
  • Collecting a list of recurring feature requests and issues, that could be solved with the rewrite.
  • Tests
    • Migrate current suite
    • New tests for the new use cases that are now possible
  • User tests and feedback.
  • New docs.
    • Migrate current docs to VuePress
    • New guide for composing the
  • Accessibility improvements for the default composition (through the partial components).
  • Exploration of ways that would further simplify the usage, even for complex cases.

How you can help?

  • Take the current v3 for a spin, leave your feedback here. Would love to hear your feedback on the architecture changes and the overall direction.
  • What you feel works well in v2 and what does not?
  • Which features do you think can be dropped from the library, given those could be implemented easily by the developer on top of the new architecture?
  • Any help with getting the docs and tests migrated would help a lot.
  • Any help with building new examples using the new architecture to find the limits would be much appreciated.
  • If you’d like to get involved in the development of the new version – send me a message on Vue’s Official Discord or on Twitter.

For the questions part, a survey will follow shortly.


This comment has been minimized.

Copy link

ztomaz commented Apr 14, 2019

<button> inside MultiSelectWrapper should include type="button" otherwise it emits the event for form submition


This comment has been minimized.

Copy link
Owner Author

shentao commented Apr 15, 2019

@ztomaz Thanks! That is a great a catch (must have missed it while prototyping).

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.