Roadmap for Vue Material beta!

As I told couple months ago, I am developing a new Vue Material from scratch, with better support, an easy way to integrate and way more reliable. And this new version is just around the corner. I received a lot of issues and complains regarding support for SSR, validation, integration with 3rd party libs and many others. So I after ~6 months on this bad boy, more than 500 files, ~28k loc and ~800 commits I now announce that the beta is coming!

The release strategy will be like this:

The first beta will be released at the beginning of November, with all goodies and a closed API. At this moment the documentation will be pretty much done, but with some components delayed to next version.
After that, a migration guide will be developed to make the transition between the old version.
A cycle of beta versions will happen to solve the issues and small improvements until a stable arrives.
The current repository will be replaced with new one. I will give a small support for the 0.7.5 version to solve important issues only.
The stable version will be released with 1.0.0 number.
I will solve the issues after the stable release while I focus on the next 1.1.0 version, with the components the didn't entered on 1.0
Boilerplates, Nuxt template and further guides will be created

Key Features

Automatic constrast ratio - YES! The theme factory will calculate the contrast between the background and text to give the correct black or white color.
On demand themes! Create themes only for the components that you're really using
Pre made theme colors
Dynamic themes
Easy to toggle features, like ripple, theming, locale values and more
Better support for Vue Router, with autosync on navigation components
Highly extensible and easy to create 3rd-party components
Namespaced attributes
~30% lighter than 0.7.5
New and Awesome on-demand components
SSR Support
Well-tested - WIP 100% coverage
Easy i18n
Minimalist and performant docs

1.0.0 roadmap

Core Stuff

[X] Themes - NEW API
- [X] Deprecated theme component
- [X] Sass Based themes
- [X] Multiple themes
- [x] CSS Variables
- [ ] CSS-only themes
[X] SSR Support - NEW
- [X] Basic Support

Components

[X] MdAutocomplete - NEW API
[X] MdApp - NEW
- [X] Documentation
- [X] Reusable App Shell component
- [X] Integration with Toolbar, Drawer and Content
[X] MdAvatar
[X] MdBottomBar
- [X] Router integration - NEW
- [X] Router Sync - NEW
- [X] Symple way to trigger active item
[X] MdButton
- [X] Router integration - NEW
[x] MdCard
- [x] Documentation
- [X] Better image handle
- [X] Expand action
[X] MdCheckbox
- [X] Array - NEW
- [X] Boolean
- [X] String
[X] MdChips
- [X] Editable
- [X] Detelable
[X] MdContent - NEW
[x] MdDatepicker - NEW
- [x] Documentation
- [X] FINALLY!
- [X] Month Selector
- [X] Year Selector
- [x] Disable Dates
- [ ] Locale aware
[X] MdDialog
- [X] Alert
- [X] Confirm
- [X] Prompt
- [X] Custom
[X] MdDivider
[X] MdDrawer - NEW API
- [X] Documentation
- [x] Deprecate md-sidenav
- [X] Persistent - NEW
- [X] Permanent - NEW
- [X] Mini - NEW
- [X] Card - NEW
- [X] Clipped - NEW
- [X] Left/Right
[X] MdElevation - NEW API
- [X] Deprecate whiteframe component
- [X] Elevation classes
[X] MdEmptyState - NEW
[X] MdField - NEW API
- [X] Documentation
- [X] Change md-input-container to md-field
- [X] Input/Textarea
- [X] Checkbox
- [X] Radio
- [X] Switch
- [X] File - NEW API
- [x] Select
[X] MdIcon
[X] MdLayout - NEW API
- [X] Documentation
- [X] Deprecate layout component
- [X] New flexbox/responsive/class-based grid
[X] MdList - NEW API
- [X] Documentation
- [X] Router integration
- [X] Expansion
- [X] Input Controls
[X] MdMenu - NEW API
[X] MdProgress - NEW API
- [X] Documentation
- [X] Spinner
- [X] Bar
- [X] 0%/100% progress
- [X] Indeterminate state
[X] MdRadio
[ ] MdRipple - NEW API
- [ ] Documentation
- [X] New ripple
- [ ] Abstract component
- [ ] Performance improvements
[X] MdSnackbar
- [X] Documentation
- [X] Themed Snackbar
[X] MdSpeedDial - NEW API
- [X] Click Action
- [X] Multiple Effects
[X] MdSteppers - NEW API
- [X] Documentation
- [X] Horizontal
- [X] Vertical
[X] MdSubheader
[X] MdSwitch
[ ] MdTable - NEW API
- [ ] Documentation
- [X] Basic table
- [X] Sort
- [X] Fixed Header
- [ ] Inline Edit
- [ ] Dialog Edit
- [x] Selection
- [ ] Pagination
- [x] Alternate Header
[X] MdTabs
- [X] Documentation
- [X] Router integration - NEW
- [X] Router Sync - NEW
- [X] Symple way to trigger active tab
[X] MdToolbar - NEW API
[X] MdTooltip

Docs pages

[ ] Advanced
- [ ] Guide
- [ ] Extending Vue Material
- [ ] Third Party Components
[X] About
[X] Changelog
[ ] Components summary
[ ] Contribute
[X] Getting Started
[ ] Migration Guide
[X] Static docs
[X] Themes
- [X] Configuration
- [ ] Dynamic Themes
[ ] UI Elements summary

Components/Features marked with a NEW label do not exists on the current version Components/Features marked with a NEW API can introduce major breaking changes. ** Mostly of unchecked components are only demanding a new docs page.

I will point out those changes inside the migration guide.

Post 1.0.0

Projects

Official Boilerplate
- SSR
- Nuxt
- PWA
- Simple
- Third Party Component
Sample Apps

Core Stuff

SSR
- Feature toggle
- SSR Only logic
A11y
RTL
Better Keyboard Navigation
Android vs iOS vs Web
Touch Events
Scrolling
Optimized theme colors
Vuelidate and Vee Validate integration

Components

Content Discovery
Content Slider
Timepicker
Range picker
Expansion Panels
Grid
Image
- Lazy Loading based on IntersectionObserver
- Loader
Onboarding
Rating Bar
Search Bar
Slider Input
Split Screen
...

Vue Material 2 will be released with the new Material Design guidelines landed on Google I/O 2018. Stay tuned!

But man! I need the ___

Have something in mind? Need a new components? Created something meaningful and think that this can fit inside the lib? Let's discuss? We have a Slack Channel and I'm online there almost everyday. Send me a message!

I want to help. What do you need?

Well. All kind of help are welcome. If you want to contribute with the project, just send me a message and I will tell what you can do. We recently created a Slack Channel to share ideas and to keep all the comunication in one place.

Awesome! I want to pay you a coffee!

Vue Material do not run under the umbrella of any company or something like that, and is an independent project created by me on spare time. It became one of the most used UI Libraries for Vue.js.

If you think that this project helped you or your company in some way, you can consider become a backer/sponsor on Patreon:

Cheers!

Woohoooooooo ⤴️ So, I want to translate new coming docs into Japanese!

@Yatima-Kagurazaka Ah yeah. That would be freaking awesome. The new docs will come with i18n support. I will translate to portuguese too.

I need to translate to Chinese too, But I barely speak English. Chinese then... Hahahaha Someone?

I can help you en_US -> pt_Br

yeah~ I am the one who can help to translate to Chinese :)

@Earlybug this will be awesome!!!

I can also help translate to French :)

I will change the documentation to have all strings inside i18n files and then I will open an issue on the experiments repository, with the progress of translations.

Hi, the projects is awesome, but why do you want deprecate theme component? It is easy to use, if it turn to SASS, it will be so difficult to use

@aokihu I'm not going to deprecate the theme component. There is some reasons why I changed this: The main changes was related to Performance, SSR Needs and Caching.

SSR. Period.
Dark themes
Automatic contrast calculation
The theme engine, inside Vue code, will remain the same. We will still have the md-theme component and md-theme attributes. It is the same that we have today.
Another good thing with this new theme engine is the ability to generate themes for specific components only. Let's say that we want to use only Buttons, Icons and Tabs with a particular theme, but use another theme for all other components. Now we can. And it is simple!
The initial parse of themes on the initial payload, especially if we declare multiples themes inside Javascript code, was REALLY expensive. An old implementation based on Angular Material 1. In my personal and unofficial benchmarks, I improved the initial load performance of the main documentation website by ~200 for the single home page theme and ~450% with multiple themes. I have tested with 3 themes. The performance for more themes would be even worse.
All of those generated styles tags wasn't cached. So EVERY SINGLE TIME that a user opened the website the application will to the same thing to generate the styles. This is crazy.
Now, there is a version for SCSS and Plain CSS, with CSS custom properties (AKA CSS Variables). For now it's almost finished, just waiting for all components to be done. Then I will create a build script to generate a CSS Version of this SCSS based theme engine.
It's now easy to create and extend components for Vue Material. This will add a lot of good things, like the possibility of having Third-party Vue Material components. Maybe you'll need a component that Vue Material do not have. This will allow other developers (and you too) to create components that will integrate with Vue Material. That can have the core theme in it.
It is way easier and faster to maintain and add new functionalities. And the compile time, for development environments, will be faster too.
This allowed me to create pre-generated themes.

I hope this changed will bring way more fluidity to your projects. I will release a migration guide, with an extensive theme section. Let me know if you have any questions about this :D

Take a look at those issues, specially the #796:

996 #947 #912 #831

It is easy to generate themes with scss:

@import "~vue-material/theme/factory";

@include md-register-theme("default", (
  primary: md-get-palette-color(blue, A200),
  accent: md-get-palette-color(pink, 700)
));

@import "~vue-material/base/theme";
@import "~vue-material/components/MdButton/theme";
@import "~vue-material/components/MdIcon/theme";
@import "~vue-material/components/MdTabs/theme";

With css only is way easier!

:root {
  --md-theme-default-primary: #448aff;
  --md-theme-default-accent: #c2185b;
}

Hey, your method is better than MUSE-UI, that is too difficult to use, so I choose your's project to use

Great! Could you accelerate the release of 1.0.0 new version? I am waiting for the datetime picker. Further more, could I make the Chinese translation for you?

@isafesoft The new release will be available in November. First week. The Datepicker will be available, but the time picker will be delayed to 1.1.0. And YES! Of course you can help. That would be awesome!

How will it be the friction to change from 0.7.5 to 1.0.0? Many breaking changes on the API? I have an ongoing project with 0.7.5 and might be tempted to check 1.0.0 to use some better components.

@vjoao breaking changes will be only for components that are labeled NEW API or NEW

I will release a migration guide comparing the components and features.

Waw cool I needed so much the date component, can we already use the beta ?

How about translate to Indonesian too? xD

@GillesBodart It will be available in November.

@ryuhiro wow! Yes. Of course. That would be awesome!

Hey, @marcosmoura. Thanks for the update and the extraordinary efforts. I have one question. Do you think this version could include #260 ?

@akashdeep-singh Yes!!!

How can I upgrade to the latest version?

Regards! (sorry about my english)

It's not available yet. Soon! :D

We have a large social media application built on 0.7.5, very exciting news about 1.0 :) Very happy to help test in a migration from 0.7.5 -> 1.0

Hey @marcosmoura! Great project. would love helping with bringing the beta live. I'm going to start a project with vuematerial, will there be a big migration from 0.8.1 to 1.0?

All the components that have NEW or NEW API will need a manual effort to migrate. I will create a migration guide to help with that. The md-theme, md-table, md-steppers, md-autocomplete and others we're created from scratch. This is due to old implementations of Vue Material and to take advantage of newest features from Vue.js Let me know if you have any questions! :D

Release Date Announcement

Book it on your calendar. Vue Material 1.0 beta will be released in 13/11/2017.

_{_{_{^{I hope to be able to comply with this schedule, but if something goes wrong in the middle of the way, I'll let you know!}}}}

It is a great jop ,I am a chinese guy but poor in English.I want helped but I don't konw what can I do for it.

@hello-word-12138 You can help testing the new version when it comes out. It will be a great start for you and you will help me a lot. I need people to test this version more than ever. :smiley:

I've just started a project to learn Vue.js/Vue-Material and will port it at Vue-Material 1.0.0 launch day.

Vlw mano!

@EthraZa Hey man. Tell me if you need anything, mano. Hahaha

Same as @EthraZa I'm starting a dashboard project and I'll directly migrate it to 1.0.0 !! :)

@marcosmoura Ao cumpadre conterrâneo, tem algo em vista sobre drag-and-drop?

Hello mano. Do you have something in your next roadmap to cover the feature drag-and-drop?

Release version delayed to November 13th I'm sorry guys. I couldn't work much these days. I just need to finish the table component and write the documentation.

@JaderCM What do you mean by drag n drop? File upload? Sortable lists?

Drag n drop inside the lists and between different lists.

Yep. This is on my roadmap. In fact the both of them.

@marcosmoura Vc ta respondendo email com seu tel na assinatura... vão(mos) começar a te mandar PM no whats. :)

@EthraZa Holy crap! Don't do this! hahahaha

I would like to start a new project with vue should I wait for new version of components. Is there a preview version anywhere.?

Hi! I can help translate to Russian

I don't think the docs needs be translated to Filipino but if yes, I'm here :D

@fmatuszewski the same

Good news, can anyone make me a recommendation about this new version?

We are the development team of a company of the government in Andalucia (Spain) and we are based on vuematerial and vuejs to make our websites and apps (the first web is already in production and it is http://www.juntadeandalucia.es/avra/gestionactivos, only in Spanish, sorry)

We have to make more websites and applications in the next months. The question is: for these next developments, do you recommend using version 0.8.1 of vuematerial or better use the beta version of 1.0?

Thanks in advance.

@santagu , the 1.0 will be way more productive if you think about components availability, but they are still very similar. Like, if you start a project right now with 0.8.1, and change it tomorrow to 1.0, maybe have to change nothing. But, since the 1.0 is going to launch in a matter of hours, just wait a little bit and start to make your plans with all it have to offer.

@marcosmoura is the release date being pushed further?

vuematerial / vue-material