• Forum Registration Closed, Opens Every Friday Only.

     New user? Please visit: Public TutFlix

Vue Mastery - Beautify with Vuetify

Vue Mastery - Beautify with Vuetify

Register & Get access to index

Getting Started with Vuetify
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
The answer is Design Systems, which are a set of guidelines established to provide consistent design and user experience.
Some of the popular ones you may have heard of include:
  • Bootstrap
  • Bulma
  • Material Design
Material Design is a design system popularized by Google which encapsulates their design principles and guidelines.
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.
With that said, let’s build something with Vuetify!
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.
Login Module Preview

A login module typically consists of:
  • Text heading
  • Username input field
  • Password input field
  • Login button
  • Register button
Sounds simple enough. Let’s dive into some code!
First release
Last update
0.00 star(s) 0 ratings

More resources from TUTProfessor