Vuetify

What is vuetify

• Component framework
• based on Google Material Design Specifications
• Full SSR support
• customizations from vue ui
• Accessibility support
• lost of inbuilt components which comes with library starts with v-

Follow this sample project’s logs for development

• Each component has its own set ot props
• components are translated to normal HTML elements at rendering
• usually things are placed inside <v-content> component
• A layout represents a row of contents
• ES6 Template string
  • can create normal string
  • but also output dynamic variables in the string

breakpoints

width of display devices in pixels

slots

vanilla js feature

pass predefined content into a component

CSS Flex System

Let us assume that our screen is divided into 12 columns.

• The structure of your layout will be as follows, v-container > v-layout > v-flex.
• v-card-title, v-card-text and v-card-actions

Whats Next?

• How to build a real-time editable data table in Vue.js
• Checkout templates at github
• Make a real dashboard

Footnotes

[2]: yt, The Net Ninja Playlist