Scribd
Upload
2K views

Vuetify Fundamentals: Cheat Sheet

This document provides a cheat sheet on Vuetify fundamentals including: 1. Instructions on getting started with Vuetify and the default app markup. 2. Examples of basic forms, programmatic breakpoints, modifying SASS variables, and using the grid system. 3. Details on features like changing tags, activator slots, dynamic themes, lazy loading, input actions, smooth scrolling, and the intersect directive. 4. A list of ecosystem resources like Github, Discord, Twitter, and Reddit for the Vuetify community.

Uploaded by

atish kamikazii
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Vuetify Fundamentals: Cheat Sheet

This document provides a cheat sheet on Vuetify fundamentals including: 1. Instructions on getting started with Vuetify and the default app markup. 2. Examples of basic forms, programmatic breakpoints, modifying SASS variables, and using the grid system. 3. Details on features like changing tags, activator slots, dynamic themes, lazy loading, input actions, smooth scrolling, and the intersect directive. 4. A list of ecosystem resources like Github, Discord, Twitter, and Reddit for the Vuetify community.

Uploaded by

atish kamikazii
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

VUETIFY FUNDAMENTALS

CHEAT SHEET
GET STARTED BASIC FORM
Install @vue/cli by running the following command:
<v-form @submit.prevent="onSubmit">
yarn global add @vue/cli <v-text-field
v-model="name"
Then create a new Vue application: label="Name"
vue create vuetify --preset vuetifyjs/vue- />
cli-preset-vuetify <v-text-field
v-model="email"
label="Email"
DEFAULT APP MARKUP
/>
<v-app> <v-btn type="submit">Submit</v-btn>
<v-navigation-drawer app> </v-form>
...
</v-navigation-drawer>
<v-app-bar app>...</v-app-bar>
PROGRAMMATIC BREAKPOINTS
When the window is resized, the $vuetify object will update:
<v-content>
<v-btn :block="$vuetify.breakpoint.smAndDown">...
<v-container fluid>
<!-- If using vue-router -->
<router-view /> MODIFYING SASS VARIABLES
</v-container> The Vuetify CLI plugin will automatically search for a variables file
</v-content> and apply it during compilation:

<v-footer app>...</v-footer> // src/sass/variables.scss


</v-app>
$body-font-family: 'Work Sans', serif;
CHANGING FONT $border-radius-root: 6px;
Out of the box, Vuetify supports MDI, Font Awesome 4 & 5, and
$font-size-root: 14px;
Material Icons. Change it by updating the icons option:

// src/plugins/vuetify.js GRID SYSTEM


Vuetify utilizes a flexbox grid-system based off of Bootstrap 4.
export default new Vuetify({ <v-container full-width>
icons: { iconfont: 'fa' }} <v-row align="center" justify="center">
}) <v-col cols="12" md="6">
<!-- Content -->
CHANGING TAGS </v-col>
</v-row>
<v-toolbar tag="nav">...
</v-container>

<nav class="v-toolbar">...
sets html tag

Want to learn more about Vuetify?


Checkout the official documentation at vuetifyjs.com
VUETIFY FUNDAMENTALS
CHEAT SHEET
ACTIVATOR SLOTS LAZY LOADING
Binds listeners and accessibility attributes. Defers the rendering of default slot until visible:

<template v-slot:activator="props"> <v-lazy min-height="200">...deferred content


<v-btn
v-bind="props.attrs"
INPUT ACTIONS
v-on="props.on"
> <v-autocomplete
Click me v-model="val"
</v-btn> @click:clear="onClear"
binds @click listener
</template> @click:prepend="onPrependClick"
/>

DYNAMIC THEME If the bound listener is emitted, the callback is invoked:


The Vuetify theme can be modified at run-time:
methods: {
mounted () {
onClear: function () {
this.$vuetify.theme.light = {
// Logic
primary: '#1976D2',
},
secondary: '#424242',
onPrependClick: function () {
accent: '#82B1FF',
// Logic
error: '#FF5252',
}
info: '#2196F3',
}
success: '#4CAF50',
warning: '#FFC107'
} SMOOTH SCROLLING
} The goTo method can scroll to a querySelector, element or Vue
component:

<v-btn @click="$vuetify.goTo('#loc')">...
INTERSECT DIRECTIVE
Under the hood, v-intersect uses the Intersection Observer API to
call a method when an element enters or leaves the viewport: ECOSYSTEM
Join and/or follow us on one of our social platforms:
<v-card v-intersect="onIntersect">...
Github
Whenever <v-card> is observed, onIntersect will be invoked: View the repository @ https://github.com/vuetifyjs
onIntersect: function (
Discord Community
entries,
Join us on Discord @ https://community.vuetifyjs.com
observer,
isIntersecting Twitter
) { Follow us on twitter @vuetifyjs
// Logic boolean value
} Reddit
Join us on Reddit @ https://reddit.com/r/vuetifyjs

Want to learn more about Vuetify?


Checkout the official documentation at vuetifyjs.com

You might also like