Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Material Design Lite
Material Design Lite

617
228
+ 1
114
Vuetify
Vuetify

342
319
+ 1
47
Add tool

Material Design Lite vs Vuetify: What are the differences?

Material Design Lite: Material Design Lite Components in HTML/CSS/JS. Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go; Vuetify: Material Component Framework for VueJS 2. Vuetify is a component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4.

Material Design Lite and Vuetify can be primarily classified as "Front-End Frameworks" tools.

"Material Design straight from the original creators" is the primary reason why developers consider Material Design Lite over the competitors, whereas "Wide range of components and active development" was stated as the key factor in picking Vuetify.

Material Design Lite and Vuetify are both open source tools. It seems that Material Design Lite with 31.3K GitHub stars and 5.32K forks on GitHub has more adoption than Vuetify with 20K GitHub stars and 2.32K GitHub forks.

Luckycycle, Webhook Relay, and Intelinvest team are some of the popular companies that use Vuetify, whereas Material Design Lite is used by Google, Troopers, and Boxme. Vuetify has a broader approval, being mentioned in 37 company stacks & 36 developers stacks; compared to Material Design Lite, which is listed in 9 company stacks and 26 developer stacks.

What is Material Design Lite?

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

What is Vuetify?

Vuetify is a component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose Material Design Lite?
Why do developers choose Vuetify?

Sign up to add, upvote and see more prosMake informed product decisions

    Be the first to leave a con
      Be the first to leave a con
      What companies use Material Design Lite?
      What companies use Vuetify?

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Material Design Lite?
      What tools integrate with Vuetify?
        No integrations found
        What are some alternatives to Material Design Lite and Vuetify?
        Bootstrap
        Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
        Material-UI
        It is a comprehensive guide for visual, motion, and interaction design across platforms and devices.
        Material Design
        Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
        Materialize
        A CSS Framework based on material design.
        Animate.css
        It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
        See all alternatives
        Decisions about Material Design Lite and Vuetify
        Paul Whittemore
        Paul Whittemore
        Developer and Owner at Appurist Software ยท | 15 upvotes ยท 118.7K views
        Fastify
        Fastify
        ExpressJS
        ExpressJS
        Node.js
        Node.js
        Vuetify
        Vuetify
        Quasar Framework
        Quasar Framework
        Vue.js
        Vue.js
        vuex
        vuex
        Electron
        Electron
        Fastly
        Fastly

        I'm building most projects using: Server: either Fastify (all projects going forward) or ExpressJS on Node.js (existing, previously) on the server side, and Client app: either Vuetify (currently) or Quasar Framework (going forward) on Vue.js with vuex on Electron for the UI to deliver both web-based and desktop applications for multiple platforms.

        The direct support for Android and iOS in Quasar Framework will make it my go-to client UI platform for any new client-side or web work. On the server, I'll probably use Fastly for all my server work, unless I get into Go more in the future.

        Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

        See more
        Interest over time
        Reviews of Material Design Lite and Vuetify
        Review ofMaterial Design LiteMaterial Design Lite

        ๋งŽ์€ ๋ฒ„๊ทธ๊ฐ€ ์กด์žฌํ•˜๋Š”๋ฐ, ๊ฐ๊ฐ์˜ css ์ •์˜๊ฐ€ ์„œ๋กœ ์—ฐ๊ฒฐ๋˜์–ด์„œ ์ˆ˜์ •์ด ์‰ฝ์ง€ ์•Š๋‹ค.

        ๋ฐœ๊ฒฌ๋œ ์ด์Šˆ์กฐ์ฐจ ์—…๋ฐ์ดํŠธ ํ•˜์ง€ ์•Š์œผ๋ฉฐ, ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ˆ˜์ •ํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.

        How developers use Material Design Lite and Vuetify
        Avatar of Fred Steffen
        Fred Steffen uses VuetifyVuetify

        We use Vuetify because we needed something that back end devs could get up to speed with quickly

        Avatar of Kevin van Guldenaar
        Kevin van Guldenaar uses Material Design LiteMaterial Design Lite

        Just enough design for non-designer types.

        How much does Material Design Lite cost?
        How much does Vuetify cost?
        Pricing unavailable
        Pricing unavailable
        News about Material Design Lite
        More news
        News about Vuetify
        More news