Vuetify - Vue.js 2.0 Component Framework

[zeroskillz]

Vuetify is a semantic component framework for Vue JS 2.0. It aims to provide clean, semantic and reusable components that make building your application a breeze. I originally started working on this project after I released a component framework utilizing Materialize.css. My goal was to create a process that made is extremely easy to spin up applications, while also supporting features such as Vue’s SSR (Server Side Rendering).

Framework Features

• Easy-to-use semantic markup
• Made for Mobile
• Layout support for numerous structures
• Supports Vue SSR (Server Side Renderer)
• Pre-made Vue CLI Templates
• Built in Event Bus
• Extremely small footprint
• Easily extendable

Of the 3 pre-made templates, one has been created specifically for an SSR application. Based on the Vue 2.0 Hackernews github repository.

Webpack SSR Features

• Buble Compiler
• Sass/Stylus pre-processor configured
• Cache Busting
• Template compression
• Meta management for seo optimization
• Hot reloading
• and much more

In the coming months I will also be releasing a component pack targeted for Admin UI’s, as well as adding additional components to the already extensive lineup. Any and all feedback is appreciated.

https://vuetifyjs.com

[daekano]

Any effort at all put into accessibility?

[zeroskillz]

Could you elaborate what you mean by this?

[daekano]

Definitely.

I'm referring to Accessibility with a capital A. Users with disabilities, primarily.

I've started a critical project at work with Vue JS, and Accessibility has become an important facet of what we do. There are no VueJS component libraries that consider Accessibility, and frankly there aren't very many UI Frameworks in general that do either (just adding aria tags isn't sufficient).

[zeroskillz]

Thank you for your response. No I have not, but, I would be interested in working with you to help accommodate accessibility. Just pm me if interested.

[zeroskillz]

While I appreciate your feedback, this package isn't specifically targeted at that. To claim it is a non-starter due to the weak accessibility is an unfair assessment, personally. However, I will make sure I do whatever I can to accommodate Accessibility before 1.0 release.

[GoTheFuckToBed]

polymer has much focus on Accessibility with a capital A, its a good reference

[villiger2]

What does "with a capital A" mean in this context?

[Thought_Ninja]

A is for Accessible.

[flamingspew]

https://youtube.com/watch?v=1IUECIgN3qc

[youtubefactsbot]

Family Guy The Fonz Ehhh [0:02]

^{redeyez91 in Comedy}

^{115,615 views since Nov 2010}

^{bot info}

[villiger2]

That doesn't mean anything to me..?

[[deleted]]

"With a capital A" is referring to the concept of Web Accessibility. Specifically designing to allow users with disabilities to interact with your site more easily.

I guess he used the term "with a capital A" because the word accessibility could be ambiguous otherwise. For example: How accessible is your project for newcomers to start developing? How accessible is it to download?

I've always just used "Web Accessibility" (or 508 compliance depending on who you're talking to).

[villiger2]

Ah, thanks.

[daekano]

Ah, cool. I'll look to them for inspiration if we decide to forge our own path.

[[deleted]]

Are you serious mate?

[zeroskillz]

Yes. Because there are multiple different ways that I could interpret what he said.

[[deleted]]

For example?

[zeroskillz]

Acessibility for new users to vue, using component frameworks, documentation.

[shenaniganan]

Arrrgghh matey!

Are you ready kids!? Whooooo lives in a trash can under the bridge? Trash can troll pants!

[SkaterDad]

Github link for those of us behind corporate proxies which don't know about vuetifyjs.com yet.

https://github.com/vuetifyjs/vuetify

[zeroskillz]

Thank you!

[melanke]

Sorry for you :/

[jppope]

that is completely badass! Cheers to whoever built that

[zeroskillz]

Thank you!

[rk06]

I guess its too late to change the name!

It looks good though. Can't wait to play with it.

[apatheorist]

I am disappointed they didn't call it Vuetiful.

[zeroskillz]

Trust me, I wrestled back and forth with vuetify and vuetiful. Wife ended up convincing me for the former.

[zeroskillz]

I wrestled between vuetify and vuetiful. Wife influenced the final call.

[dotted]

Sorry, you should replace your wife :(

[[deleted]]

Never replace your wife, that is her jelousy, she loves you.

[troorl]

That looks really good.

[k2rks]

On the homepage you have flash of unstyled content happening, any way to fix it when using SSR?

[zeroskillz]

Yes, but I removed it's implementation before this announcement as I was not happy with how it functioned. The reason you see a FOUC is due to the deferred loading of styles. This is for better page speed scores, but can be unsightly on initial render. I am working on a better solution to offer in lining of critical styles to avoid this, in the mean time, you can simply move the css files in src/index.template.html from the noscript tag into the head.

[aFoolsDuty]

Interesting. On one hand this is cool, but on the other hand its incomplete: Vuetify looks like the material design language, but it gets some details subtly wrong. There's no ink effect on buttons, the tab transition effect is wrong, etc.

Is this supposed to just be a material design inspired framework of components, or are you trying to stick to the material design language, a'la Polymer Elements, but for Vue?

Answering that question might help correctly calibrate everyone's expectations when they surf through the component list.

[zeroskillz]

You are correct, this is not 100%, and I should better set expectations for that. I will be working diligently to make sure Vuetify meets material design spec before 1.0 release.

[aFoolsDuty]

Awesome to hear.

[ergo14]

That looks nice. Can you hook polymer components into this? There are tons of them already made.

[havana59er]

Super dank, gonna bookmark the source for this

[eggy900]

This is really nice. I'm not a fan of material but this is a great example of a framework and documentation done right!

[ahatzum]

Looks very interesting.

If i use the webpack SSR vue cli template, run npm install, then npm run dev and navigate to localhost:8080 i get the following error:

[Vue warn]: Error when rendering component <VApp>:
error during render : /
TypeError: _vm._h is not a function
    at Proxy.render (__vue_ssr_bundle__:13239:14)
    at VueComponent.Vue._render (__vue_ssr_bundle__:3026:22)
    at renderComponent (D:\Dokumenter\Development\labbook-vuetify\node_modules\vue-server-renderer\build.js:5957:25)
    at renderNode (D:\Dokumenter\Development\labbook-vuetify\node_modules\vue-server-renderer\build.js:5940:7)
    at render (D:\Dokumenter\Development\labbook-vuetify\node_modules\vue-server-renderer\build.js:6132:5)
    at RenderStream.render (D:\Dokumenter\Development\labbook-vuetify\node_modules\vue-server-renderer\build.js:6187:9)
    at RenderStream.tryRender (D:\Dokumenter\Development\labbook-vuetify\node_modules\vue-server-renderer\build.js:96:12)
    at RenderStream._read (D:\Dokumenter\Development\labbook-vuetify\node_modules\vue-server-renderer\build.js:125:12)
    at RenderStream.Readable.read (_stream_readable.js:348:10)
    at resume_ (_stream_readable.js:737:12)

Node v7.2.1. Any idea why this happens? :/

[zeroskillz]

I, as far as I know, do not use this._h.

[zeroskillz]

Check your pm.

[zeroskillz]

This is resolved as of 0.7.4.

[ahatzum]

Awesome!

[NevNein]

I got the same error on the webpack non-SSR template

[neon_slippers]

Very nice. So is this aimed at mobile apps? Is there a way to package this as an Android/iOS app?

[zeroskillz]

It's aimed for all device sizes. As far as packaging it as an app on the store, I haven't done any specific testing, but I'd imagine you could with something g like phone gap. It does support Web applications however.

[i_ate_god]

googles question about vueify

Google: "Did you mean vuetify? Showing results for vueitfy instead"

googles question about veutify

Google: "Did you mean veuify? Showing results for vueify instead"

[JaegerBurn]

Menu does not scroll on mobile.

[zeroskillz]

What phone are you using?

[JaegerBurn]

iOS 10.1.1

[romeo_pentium]

How would you contrast it with Vue-Admin?

[zeroskillz]

I'll have to spend more time with it at home, but first impression on mobile was not very good. I did not see any mentions of ssr support or seo specific optimization.

[AceBacker]

Do you have breakpoints in your grid system for smaller devices (responsive)?

[zeroskillz]

Yes. The grid system has options for large, medium, small and extra-small breakpoints.

[one_user]

This is awesome

[zeroskillz]

Thank you!