In the next five minutes, I'll you show you the following hot Vuetify elements:

• Typography
• Spacing
• Buttons
• Navigation
• Grid
• Card

And by the end of this article, you'll feel confident in making stunning apps with just a few lines of code.

While reading, head over to Scrimba's 2-hour Vuetify course to find out more and explore the code in the platform's interactive playground. Plus you can test your new skills with some interactive coding challenges. Let's get started!

Creating a Vuetify object

To use Vuetify, we first pull in Vue and Vuetify from their CDNS.

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

This allows us to instantiate a Vue application with a Vuetify property and create a new Vuetify object:

new Vue({ 
    el: '#app',
    vuetify: new Vuetify({}),
    data: {
        message: 'Using Single File Components'
    }
});

Click through to see this in detail.

Vuetify provides plenty of options for creating stunning typography, from headings of various sizes, to titles, subtitles and body text:

<h1 class="display-4">Heading 1</h1>
<h2 class="display-3">Heading 2</h2>
<h3 class="display-2">Heading 3</h3>
<h4 class="title">Title</h4>
<h5 class="subtitle-1">Subtitle</h5>
<p class="body-1">Body</p>

Changing text color and background color is easy with Vuetify, too. For the background color, simply add the name of the required color to the element's class. For text color, just add the color name followed by --text.

This works for around 20 standard colors and can be customized using accompanying classes such as lighten and darken.

<h1 class="display-4 purple yellow--text text--darken-2">Heading 1</h1>

Vuetify also offers classes to change the font weight and style, as well as truncate and transform text. Head over to the cast to find out more.

Spacing

Anyone who's ever used CSS knows that margins and padding can be tricky. Not with Vuetify! To add and adjust the spacing between elements, simply use classes with the following abbreviations:

m = margin p = padding t = top r = right b = bottom l = left x = right + left y = top + bottom a = all

Spacing size is adjusted using the numbers 1 to 12, which correspond to four-pixel increments. For example ml-5 denotes a left margin of 20 pixels.

<h3 class="ml-5">Spacing</h3>

Centering elements is also easy with Vuetify. Simply wrap the element in a container that spans the page, then give it a right and left margin of auto:

<v-row>
     <h3 class="mx-auto">Spacing</h3>
</v-row>

That's not the end of Vuetify's handy tips and tricks for element spacing.

Navigation

The two main navigation options available in Vuetify are <v-app-bar> and <v-toolbar>.

<v-app-bar
     color="deep-purple accent-4"
     dense
     dark
>

Although the two elements are interchangeable to some extent, <v-app-bar> is designed for use as a site's main navigation and includes features such as scroll animations and a range of props and options.

<v-toolbar> is a smaller, more versatile component which is designed to provide functionality to other areas of an app. For instance, it could be used for the basic edit features on a small text editor.

Both navigation elements handle list drop-downs and automatically size navigation icons and buttons.

Grid

Vuetify has a built-in grid system which makes sizing and positioning elements in an app simpler than ever. The grid is split into 12 columns and has five media breakpoints for handling a variety of screen sizes.

While the default width of an element is 12 columns, it's easy to adjust this by changing the column value. For example, an item with a column value of 6 takes up half the page width. Items can be positioned using the offset property.

<v-col sm="6" offset-sm="3">
    <v-card
    class="pa-2"
    outlined
    tile
    >
    Column
    </v-card>
</v-col>

Columns in Vuetify come with pre-set spacing.