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.

    main.js:

    import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
  iconfont: 'md' // material design icons https://vuetifyjs.com/en/framework/icons
})

  4. Add to your app's <head>.

    <link href="https://fonts.googleapis.com/css?family=Material+Icons" 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.

    https://vuetifyjs.com/en/framework/pre-made-layouts

More blog posts