Getting Started with Vuetify
Introduction
In today’s world of beautifully designed software, having a site that only works functionally without any design is no longer acceptable. Most users these days expect a certain level polish when they visit a site. So when you are starting a new website, in addition to making sure everything works properly, how do you make sure that it has:
- an attractive visual design
- the best user experience possible
Some of the popular ones you may have heard of include:
- Bootstrap
- Bulma
- Material Design
And while getting started with Material Design may seem as simply as downloading a CSS file and including it inside your application, this method is often unable to fully take advantage of component design patterns that allow your application to sustainably scale.
Presenting Vuetify!
Lucky for us, John Leider created Vuetify, which is a Vue component library that is built according to the Material Design specifications so you can rapidly build well designed applications. And while choosing a component library can be a difficult decision, Vuetify is a great choice because:
- It is easy and intuitive to use
- Has one of the most vibrant and active communities in the Vue ecosystem
- With regularly scheduled patches, you can feel confident knowing your application will be supported and updated as fixes and new features are pushed
- And you won’t have to worry whether the components are accessible or supported across the various browsers. Vuetify has you covered.
For this lesson, we are going to show you how powerful Vuetify is by building a common module that most applications have: a login module.
A login module typically consists of:
- Text heading
- Username input field
- Password input field
- Login button
- Register button
