v4.0 Roadmap

[shentao]

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.

Roadmap

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

• [x] Extracting the functionality into a set of smaller, presentation components and a renderless component that controls them all.
• [x] 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
  • [x] Migrate current suite
  • [ ] New tests for the new use cases that are now possible
• [ ] User tests and feedback.
• [ ] New docs.
  • [x] 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.

[ztomaz]

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

[shentao]

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

[marktnoonan]

Hi Damian, I am struggling with this error when I try to run npm run dev in v3:

mark:vue-multiselect marknoonan$ npm run dev

> vue-multiselect@3.0.0 dev /Users/marknoonan/Sites/open-source/vue-multiselect
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting                                                            

 ERROR  Failed to compile with 2 errors                                                                                                                      22:29:16

This relative module was not found:

* ./src/main.js in multi (webpack)-dev-server/client?http://10.0.0.23:8087/sockjs-node (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)-dev-server/client?h
ttp://localhost (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://10.0.0.23:8087/sockjs-node ./src/main.js

Maybe this is not something I should expect to be able to do at this point? If you can point me in a better direction to take this for a spin I'm excited to check it out. I didn't get far on debugging the error and it's time for bed! But I tried the top solutions I could find to similar errors. Nothing seemed too make much of a difference. Maybe the solution will be obvious to you.

I'm keen to help with docs and examples for v3. I really want to learn the strengths and weaknesses of the architecture you've chosen and get comfortable with the renderless stuff. Any pointers are appreciated.

[shentao]

Hey @marktnoonan, sorry for the late reply. I appreciate you giving it a try! The task to run to preview the library and the docs is npm run docs:dev / yarn docs:dev.

[DmitrySkibitsky]

Still waiting.

 :reduce="item => item.property"

[abhilashtg]

Was required to have an extra icon in the listed or selected entry if some condition is satisfied. On clicking the icon a popup has to come for capturing some extra details.

Is this possible currently?

[DmitrySkibitsky]

@abhilashtg What about slot?

[DmitrySkibitsky]

@abhilashtg https://github.com/DmitrySkibitsky/laravel-vue-spa-shopping-cart/blob/f29309cb17a7dc9f07f16798bffdc6d3da1de86f/resources/assets/js/components/public/catalog/Filters.vue#L27 Here add a new button to the selected items

[abhilashtg]

@DmitrySkibitsky Thanks! Let me try on it.

[DmitrySkibitsky]

@abhilashtg Look in the issue there are more examples of how these slots to write.)

[abhilashtg]

@DmitrySkibitsky Sure, Thank you.

[abhilashtg]

I have created a fiddle for my usecase: https://jsfiddle.net/abhilashtg/rq3twhbg/10/

The button is displayed. Even it can be an icon. I added a Bootstrap button. But the style seems not appearing.

The close icon in each selected option is dispapeared after adding the button. I need the button to visible conditionally.

[andreasvirkus]

@shentao has there been any progress on v3?

[coolfarmer]

@shentao , I'm about to use your component on a very large scale project, is there any news about the V3?

[shentao]

@coolfarmer The work has been restarted and we were able to make some really nice progress. If everything goes well, we might be able to ship an alpha release in the next 2 weeks. 🤞

[guilhermeaiolfi]

Just to confirm, the v3 development paused, right? I don't know what version should I use for a new project, or even if the recommendation would be look something else. Any news on this would be welcome. Thanks.

[shentao]

Sadly yes. Feel free to use the current version as it is mostly stable. The new version was supposed to be 95% backward compatible, so once it finally ships, it shouldn’t be a big problem to update.

[guilhermeaiolfi]

Since v3 is in an usable state, couldn't you publish an alpha version to npm? Maybe other would be interested in supporting it and maybe it would see a brighter future. Mostly because it seems that so much work went into it, it would be a shame to lost all the effort. It really looks like a very thought out project.

[shentao]

I could try doing that over the weekend. Will ping you here once it's done! :)

[skjnldsv]

Also, maybe pin this issue so people can see it first ! Thanks for everything you do @shentao :hugs:

[sky-code]

@shentao do this alpha release will contains feature for reduce value?

[mseele]

Is the renderless component approach still the way to go for v3? Because i find MultiselectCore.js only in the v3 branch and NOT in the next branch. In my understanding the v3 branch is obsolete and the next branch will be the v3 release, but maybe i'm wrong!?

Why i'm asking: We are evaluating different vue select libraries that we need to style at our own - some clarification would be cool. Thanks.

[hisuwh]

vue 3 is now the default version of 3. How is this progressing?

[Anoesj]

What's the progress on the v3 version of VMS? There's been an v3.0.0-alpha.2 out for quite some time now, how about finalizing the upgrading to v3 soon?

[mattelen]

For version 3, since a rewrite is a major task, and so much with Vue has changed since this roadmap was created, we're currently focused on getting a stable version of VMS working on Vue 3 based on the current VMS v2 codebase. A discussion on the direction we are heading with VMS has been opened here: https://github.com/shentao/vue-multiselect/discussions/1589