Vuetify, a young presentation framework, implements Google's Material Design system and feels to me like the next iteration of Twitter Bootstrap. I highly recommend using it to build new CRUD apps. I felt that their docs were a little overwhelming, so here's what worked for me to get started.

  1. Optional: Manage dependencies via Vue CLI 3's new UI.

    npm i -g @vue/cli`
    npm i -g @vue/cli-service-global
    vue ui
  2. Add Vuetify to your dependencies via that UI or manually.

    npm i --save vuetify
  3. Include Vuetify in your main application JS.


    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    Vue.use(Vuetify, {
      iconfont: 'md' // material design icons
  4. Add to your app's <head>.

    <link href="" rel="stylesheet">
  5. Work off of some pre-made layouts to get started. And see UI Components in the sidebar after getting that set up.

More blog posts