
Vuetify - Material Component Framework for VueJS 2 - mhaehnel
https://vuetifyjs.com/
======
simooooo
Looks cool, unfortunately like many of these UI frameworks, the more advanced
functionality has been left out so far. Compared to [http://semantic-
ui.com/modules/dropdown.html](http://semantic-ui.com/modules/dropdown.html)
which has searching and filtering etc.

Hard to move to anything this unless it's the most basic of applications.

~~~
spankalee
The advanced functionality is left out because it's very difficult, and quite
a waste of valuable developer time, to reimplement essentially the same widget
set over and over and over again for each framework.

That's just one reason why it saddens me to see so many proprietary frameworks
out there with more all the time, especially ones that are so close to being
compatible with Web Components. If Vue just used and produced Web Components,
it could use a common Material Design component set. The investment in fewer
component sets by more people would result in much higher quality and free up
developers to work on higher-level things.

~~~
jazoom
And Semantic UI is far too large for a site that wants to be snappy.

------
johndoe4589
Could actually see a "flash of unstyled content" on my desktop PC. No biggie,
but that makes me think about just how overkill I want to go with VueJS.
(edit: wondering also if they precompiled those templates with vue-loader?)

I'm super excited about VueJS, and start using it on my site. But when I see a
component for a _button_ , you know, just a regular styled link... I wonder if
there is really a purpose to that? How do you strike the right balance of what
should be a component, and what can be handled as plain html with perhaps some
backend helpers to output in view templates?

Also just as a general criticism I think it's not welcoming for a Vue
component framework to have such a strong opiniated design built in. It would
be much nicer to have the theme something relatively easy to change. It may be
don't get me wrong... but my first impression is "Can I even use this? Without
changing tons of style rules?".

For this I think the relatively simple design of Bootstrap is a strength. Give
me the same components with a barebones design, with cheap flat buttons with
some rounded corners for "pzaz" and then I feel much more confident about
bringing that into an existing project. Even if I started a site today, I
don't want to use Material design.

~~~
colordrops
> But when I see a component for a button, you know, just a regular styled
> link... I wonder if there is really a purpose to that?

Why shouldn't there be a component for a button? Buttons can have endless
styles and animations. They have a myriad of behaviors. For instance, there
are differences in how they could respond to touches versus mouse clicks. They
have a standard interface. With a component, you could keep them consistent
across an application and share them across applications.

------
pasta
I disabled the use of custom fonts and have to say that the material style of
Google makes websites unreadable. Just like this framework does.

This is because the span inside an icon has a huge font size. And they use
ligatures for characters (so I'm seeing the huge ligatures).

Why would someone choose ligatures over CSS classes?

Edit: I was thinking about problems with screen readers and so on. A CSS class
is just styling, but what Google uses is content.

~~~
kukx
Could you provide a screenshot of the problem you encounter?

~~~
Kiro
Just disable the "Material Icons" font in DevTools and you'll see it.

------
mrgoldenbrown
What would be helpful is a comparison to all the _other_ Vue Material
frameworks that already exist. (see github.com/vuejs/awesome-vue for example)
ie, why should I switch? Why did this project get created from scratch instead
of adding on to the existing ones?

~~~
bradstewart
A handful of those other frameworks wrap Material Design Light and/or
Materialize in Vue components, so this eliminates that dependency and
(theoretically) provides a cleaner API.

But [https://vuematerial.github.io/](https://vuematerial.github.io/) looks to
have pretty similar "features" and is "Vue native" as well.

------
kentosi
I'm not UI expert, but the fact that the buttons don't have any animation
change (or change in colour) when pushed down is a little grating...

~~~
zeroskillz
ty for the feedback.

------
haffla
Hmm I thought I could use this and add a few Material elements to my project
here and there. But only including the CSS completely changes the styling of
everything on my page (buttons, inputs, etc..). I mean not even Bootstrap
changes the appearance of <button> until you add 'btn' class.

------
desireco42
While this is useful to have, I would argue that layout should be left to css
frameworks (material css in this case) and components only used for functional
parts of the app.

No one is forcing us to make everything a component. What would be a benefit
of having a footer or header a component for example?

~~~
Kiro
If you don't want to make many modifications I prefer having it like this,
with each component being completely self-contained with no global CSS
dependencies.

------
Numberwang
I love Material Design and so does everyone else,so I'm definitely in the
target group. Thank you for making this.

------
samcheng
This page had an ugly flicker as the page loaded, with the unstyled left-side
navigation displayed before the CSS rules were loaded.

It's not a huge deal, and honestly I have built some sites like that as well,
but when you're pitching front-end frameworks, stuff like that matters. I
don't want anyone to think that that kind of flicker is inherent to Vue.

~~~
bpicolo
What's the recommended way to resolve that these days? Render your primary CSS
bundle in head?

~~~
samcheng
I believe best practice is to sort out which of your CSS is needed to render
above-the-fold content, separate that out into a smaller file, and serve that
higher in the page or even inline it. The rest of the CSS can be served at the
bottom, with the JavaScript.

If anyone has a better plan, I'm all ears!

~~~
zeroskillz
That is correct. It can just be a pain to do intuitively as all sites are
different. Vuetify Documentation runs off of the vuetify webpack-ssr vue cli
template which I recently removed that functionality.

------
retube
what's the big deal with "material"? Looks ugly as sin. I just don't get it.

~~~
baobrain
Personally, I like material design, as do many others.

If done right, it makes the interface feel fluid and alive rather than just
click and appear.

Whether or not you like that is personal preference.

~~~
onurozkan
completely agree.

[https://angular.io/docs/ts/latest/](https://angular.io/docs/ts/latest/) is
the best material implementation i believe.

~~~
tzaman
Try Google Cloud Console. Even better!

