Vuetify Snippets

00-blank.vue

<template>
  <span class="text-h3">Just title</span>
</template>

10-container.vue

<template>
  <div>
    <v-container class="orange lighten-1">Non-fluid container</v-container>
    <v-container fluid class="orange darken-2">Fluid
      container</v-container>
  </div>
</template>

15-container-fillup.vue

<template>
  <v-container fluid fill-height class="orange darken-2">Fill page (Resize
    me)
  </v-container>
</template>

20-grid.vue

<template>
  <div>
    <span class="green--text">justify:center,
      align-content:end</span>
    <v-container fluid>
      <v-row class="green lighten-1" justify="center" align-content="end">
        <v-col cols="2">Cell 1 (1/6 width)</v-col>
        <v-col cols="4">Cell 2 (1/3 width)</v-col>
        <v-col cols="auto">Cell 3</v-col>
      </v-row>
    </v-container>
    <span class="orange--text">justify:end, align-content:start</span>
    <v-container fluid>
      <v-row class="orange darken-2" justify="end" align="center">
        <v-col cols="2">Cell 1</v-col>
        <v-col cols="4">Cell 2</v-col>
      </v-row>
    </v-container>

    <span class="brown--text text--darken-2">justify:space-around
      align-content:center</span>
    <v-container fluid>
      <v-row class="brown lighten-2" justify="space-around"
        align-content="center">
        <v-col v-for="i in 5" :key="i" cols="auto">Cell {{i}}
        </v-col>
      </v-row>
    </v-container>
    <span>Responsive Width</span>
    <v-container fluid>
      <v-row class="orange lighten-2" align-content="center">
        <v-col v-for="i in 11" :key="i" md="4" sm="6">Cell {{i}}
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<style scoped>
.row {
  min-height: 100px;
}
.col {
  border: 1px solid black;
}
</style>

30-button.vue

<template>
  <div>
    <div class="text-h4">Buttons</div>

    <v-btn>Normal</v-btn>
    <v-btn block>Block button</v-btn>
    <v-btn color="primary">Primary color</v-btn>
    <v-btn color="error">Color: error</v-btn>
    <v-btn color="accent">Color: accent</v-btn>
    <v-btn dark>Dark</v-btn>
    <v-btn light>Light</v-btn>
    <v-btn disabled>Diabled</v-btn>
    <v-btn elevation="4">Elevation:4</v-btn>
    <v-btn fab>FAB</v-btn>
    <v-btn loading>Loading</v-btn>
    <v-btn outlined>Outline</v-btn>
    <v-btn rounded>Rounded</v-btn>
    <v-btn shaped>Shaped</v-btn>
    <v-btn small>Small</v-btn>
    <v-btn medium>Medium</v-btn>
    <v-btn x-small>Extra small</v-btn>
    <v-btn x-large>Extra large</v-btn>

  </div>
</template>
<style>
.v-btn {
  margin: 4px;
}
</style>

32-button-group.vue

<template>
  <div>
    <div>
      Single selection: {{data}}
    </div>
    <v-container fluid>
      <v-row>
        <span>Light</span>
        <v-btn-toggle background-color="teal" v-model="data">
          <v-btn small>C</v-btn>
          <v-btn small>Java</v-btn>
          <v-btn small>Kotlin</v-btn>
          <v-btn small>Rust</v-btn>
          <v-btn small>TypeScript</v-btn>
        </v-btn-toggle>
      </v-row>
      <v-row>
        <span>Dark</span>
        <v-btn-toggle dark background-color="teal" v-model="data">
          <v-btn small>C</v-btn>
          <v-btn small>Java</v-btn>
          <v-btn small>Kotlin</v-btn>
          <v-btn small>Rust</v-btn>
          <v-btn small>TypeScript</v-btn>
        </v-btn-toggle>
      </v-row>
      <v-row>
        Icons
        <v-btn-toggle v-model="data">
          <v-btn small>
            <v-icon>mdi-gondola</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-train</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-bicycle</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-tractor</v-icon>
          </v-btn>
        </v-btn-toggle>
      </v-row>
      <v-row>
        <div>Multiple selection: {{langs.join(",")}}</div>
      </v-row>
      <v-row>
        <v-btn-toggle multiple v-model="langs" color="primary">
          <v-btn small>C</v-btn>
          <v-btn small>Java</v-btn>
          <v-btn small>Kotlin</v-btn>
          <v-btn small>Rust</v-btn>
          <v-btn small>TypeScript</v-btn>
        </v-btn-toggle>

      </v-row>
      <v-row>
        Rounded
        <v-btn-toggle rounded background-color="orange">
          <v-btn small>
            <v-icon>mdi-gondola</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-train</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-bicycle</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-tractor</v-icon>
          </v-btn>
        </v-btn-toggle>
      </v-row>
      <v-row>
        Shaped
        <v-btn-toggle shaped background-color="teal">
          <v-btn small>
            <v-icon>mdi-gondola</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-train</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-bicycle</v-icon>
          </v-btn>
          <v-btn small>
            <v-icon>mdi-tractor</v-icon>
          </v-btn>
        </v-btn-toggle>
      </v-row>
    </v-container>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  data = 0;
  langs: number[] = [];
}
</script>
<style>
.row {
  margin-bottom: 8px;
}
</style>

40-input-autocomplete.vue

<template>
  <div>
    <v-container>
      <div class="text-h4">Autocomplete</div>
      <v-row>
        <v-col cols="auto">
          With hint and icon
        </v-col>
        <v-col cols="auto">
          <v-autocomplete prepend-icon="mdi-city" :items="cities"
            v-model="place">
          </v-autocomplete>
        </v-col>
        <v-col cols="auto">
          Single selection: {{place}}
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="auto">
          With chips
        </v-col>
        <v-col cols="auto">
          <v-autocomplete label="Location" hint="Select a city" small-chips
            multiple :items="cities" v-model="places">
          </v-autocomplete>
        </v-col>
        <v-col cols="auto">
          Multiple selections: {{places.join(" AND ")}}
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="auto">
          With deletable chips
        </v-col>
        <v-col cols="auto">
          <v-autocomplete chips multiple deletable-chips :items="cities"
            v-model="places2">
          </v-autocomplete>
        </v-col>
        <v-col cols="auto">
          Multiple selections: {{places2.join(" AND ")}}
        </v-col>
      </v-row>
      <div class="text-h4">VSelect</div>
      <v-row>
        <v-col cols="auto">
          <v-select :items="cities"></v-select>
        </v-col>
      </v-row>
    </v-container>

  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  cities = [
    "Lansing",
    "Byron Center",
    "Ada",
    "Grandville",
    "Jenison",
    "Plymouth",
    "Detroit",
  ];
  place = "";
  places: Array<string> = [];
  places2: Array<string> = [];
}
</script>

41-input-checkbox.vue

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="3" class="yellow darken-2">
        City Selections: {{selected.join(", ")}}
        <v-checkbox v-for="(cityName,pos) in cities" :key="pos"
          :label="cityName" :value="cityName" v-model="selected">
        </v-checkbox>
      </v-col>
      <v-col cols="3" class="orange lighten-3">
        Values selected {{selectedNum.join(", ")}}
        <v-checkbox v-for="(cityName,pos) in cities" :key="pos"
          :label="cityName" :value="pos" v-model="selectedNum">
        </v-checkbox>
      </v-col>
      <v-col cols="3">
        My city is {{myCity}}
        <v-radio-group v-model="myCity">
          <v-radio v-for="(cityName,pos) in cities" :key="pos"
            :label="cityName" :value="cityName"></v-radio>
        </v-radio-group>
      </v-col>
      <v-col cols="12">
        My city index is {{myCityIdx}}
        <v-radio-group row v-model.number="myCityIdx">
          <v-radio v-for="(cityName,pos) in cities" :key="pos"
            :label="cityName" :value="pos"></v-radio>
        </v-radio-group>
      </v-col>
    </v-row>
  </v-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  myCity = "";
  myCityIdx = 0;
  selected: string[] = [];
  selectedNum: number[] = [];
  readonly cities = [
    "Lansing",
    "Byron Center",
    "Ada",
    "Grandville",
    "Jenison",
    "Plymouth",
    "Detroit",
  ];
}
</script>

43-input-textfield.vue

<template>
  <v-container fluid>
    <div class="text-h4">Input Fields</div>
    <v-row>
      <v-col cols="3">
        <v-text-field label="With label"></v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field hint="With hint"></v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field counter="10"></v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field maxlength="13" counter="13" hint="Max Length:13">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field outlined label="Song Title">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field clearable label="Eraseable">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field outlined rounded label="rounded outline">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field outlined shaped label="shaped outline">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field color="red darken-2" outlined label="with color">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field color="red darken-2" solo label="solo style">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field color="red darken-2" solo-inverted
          label="solo-inverted style">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field prepend-icon="mdi-food" label="with icon">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field prepend-inner-icon="mdi-snail"
          label="with inner icon">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field type="number" suffix="miles" label="with suffix">
        </v-text-field>
      </v-col>
      <v-col cols="3">
        <v-text-field type="password" label="secret"
          append-icon="mdi-key-chain">
        </v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  myCity = "";
  myCityIdx = 0;
  selected: string[] = [];
  selectedNum: number[] = [];
  readonly cities = [
    "Lansing",
    "Byron Center",
    "Ada",
    "Grandville",
    "Jenison",
    "Plymouth",
    "Detroit",
  ];
}
</script>

44-input-validation.vue

<template>
  <v-container fluid>
    <div class="text-h4">Input Validation</div>
    <v-form v-model="valid">
      <v-row>
        <v-col cols="auto">
          <v-text-field label="Your email" type="text" :rules="myRules">
          </v-text-field>
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  em1 = "";
  valid = false;
  emsg = "";
  myRules = [
    function (x: string | undefined): boolean | string {
      const atPosition = x?.indexOf("@") ?? -1;
      if (atPosition >= 1) {
        return true;
      } else {
        return "Missing '@'";
      }
    },
    function (x: string | undefined): boolean | string {
      if (x && x.endsWith(".edu")) {
        return true;
      } else {
        return "Only .edu emails are accepted";
      }
    },
  ];
}
</script>

45-input-slider.vue

<template>
  <v-container fluid>
    <div class="text-h4">Sliders</div>
    <v-row>
      <v-col cols="6">
        <v-slider :label="`Year ${year1}`" min="1950" max="2025"
          v-model="year1">
        </v-slider>
      </v-col>
      <v-col cols="6">
        <v-slider :label="`Year ${year2}`" min="1950" max="2025"
          persistent-hint hint="Inverse Label position" inverse-label
          v-model="year2">
        </v-slider>
      </v-col>
      <v-col cols="6">
        <v-slider :label="`Year ${year3}`" min="1950" max="2025"
          persistent-hint hint="With icon" append-icon="mdi-clock"
          v-model="year3">
        </v-slider>
      </v-col>
      <v-col cols="6">
        <v-slider :label="`Year ${year4}`" min="1950" max="2025"
          background-color="orange" color="red" persistent-hint
          hint="Custom color" v-model="year4">
        </v-slider>
      </v-col>
      <v-col cols="6">
        <v-slider :label="`Year ${year5}`" min="1950" max="2025"
          persistent-hint hint="Custom thumb color" thumb-color="red"
          v-model="year5">
        </v-slider>
      </v-col>
      <v-col cols="6">
        <v-slider label="`Year" min="1950" max="2025" persistent-hint
          hint="Custom track color & thumb label" track-color="red"
          thumb-label="always" v-model="year6">
        </v-slider>
      </v-col>
    </v-row>
    <div class="text-h4">Rating</div>
    <v-row>
      <v-col cols="4">
        <v-rating length="7" v-model="rate1"></v-rating>
        Your rating: {{rate1}}
      </v-col>
      <v-col cols="4">
        <v-rating length="7" v-model="rate2" half-increments></v-rating>
        Your rating: {{rate2}} (0.5 increment)
      </v-col>
      <v-col cols="4">
        <v-rating length="4" empty-icon="mdi-history" full-icon="mdi-clock"
          v-model="rate3">
        </v-rating>
        With md-icons: {{rate3}}
      </v-col>
    </v-row>
  </v-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  year1 = 2000;
  year2 = 2000;
  year3 = 1987;
  year4 = 1957;
  year5 = 1999;
  year6 = 1966;
  rate1 = 0;
  rate2 = 2.5;
  rate3 = 2;
}
</script>

47-input-picker.vue

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="4">
        Your time {{timeSelection}}
        <v-time-picker elevation="4" color="red" v-model="timeSelection">
        </v-time-picker>
      </v-col>
      <v-col cols="4">
        Confirmed on {{dateSelection}}
        <v-date-picker elevation="4" color="teal" v-model="dateSelection">
        </v-date-picker>
      </v-col>
      <v-col cols="4">
        Hex color code {{colorSelection}}
        <v-color-picker elevation="4" mode="hexa" show-swatches
          v-model="colorSelection">
        </v-color-picker>
      </v-col>
    </v-row>
  </v-container>

</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  timeSelection = "";
  dateSelection = "";
  colorSelection = "";
}
</script>

50-form.vue

<template>
  <div>
    <v-container fluid class="red darken-2 my-4">
      <v-row class="green lighten-3 ma-1" justify="center">
        <v-sheet elevation="4" class="pa-3 my-3">
          <v-form v-model="dataReady">
            <v-row class="flex-column" align="end">
              <v-col>
                <v-text-field prepend-icon="mdi-email" type="text"
                  label="Email" v-model="uMail" :rules="emailRules" />
              </v-col>
              <v-col>
                <v-text-field prepend-icon="mdi-lock" type="password"
                  label="Password" v-model="uPass" :rules="pwRules" />
              </v-col>
              <v-col cols="auto">
                <v-btn outlined :disabled="!dataReady">Login</v-btn>
              </v-col>
            </v-row>
          </v-form>
        </v-sheet>
      </v-row>
    </v-container>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
const EM_REGEX = /([0-9a-z]+)@([a-z0-9]+\.)+(edu|com|org)$/;

@Component
export default class Sample extends Vue {
  emRegex = EM_REGEX;
  dataReady = false;
  uMail = "";
  uPass = "";
  emailRules = [
    function (x: string): boolean | string {
      return x.length > 0 ? true : "Email is required";
    },
    function (x: string): boolean | string {
      const matchLen = x.match(EM_REGEX)?.length ?? 0;
      return matchLen > 0 ? true : ".edu, .com, org expected";
    },
    (x: string): boolean => x.indexOf("@") > 0,
  ];
  pwRules = [
    function (x: string): boolean | string {
      return x.length >= 6 ? true : "Password (at least 6 chars) is required";
    },
  ];
}
</script>

60-message.vue

<template>
  <v-container fluid>
    <v-tooltip bottom>
      <template #activator="{val,on}">
        <v-btn @click="showAlert" v-on="on" v-bind="val">Show Alert
        </v-btn>
      </template>
      <span>Show various types of alert</span>
    </v-tooltip>
    <v-btn @click="showToast">Show Snackbar</v-btn>
    <v-alert dismissible v-model="show1" type="success">Success message
    </v-alert>
    <v-alert dismissible border="bottom" v-model="show1" type="info">
      Informational message (with bottom border)
    </v-alert>
    <v-alert dismissible elevation="3" colored-border border="left"
      v-model="show1" type="warning">
      Warning message (with elevation and colored border)
    </v-alert>
    <v-alert dismissible border="bottom" v-model="show1" type="error">
      Error alert!
    </v-alert>
    <v-alert dismissible dense elevation="4" v-model="show1"
      type="success">
      Dense alert!
    </v-alert>
    <v-alert dismissible outlined elevation="4" v-model="show1"
      type="info">
      Outlined information
    </v-alert>

    <v-snackbar app v-model="show2" top right color="purple">Show up in the
      upper right
      corner
    </v-snackbar>
    <v-snackbar app v-model="show2" bottom>At the bottom of the screen
    </v-snackbar>
    <v-snackbar app v-model="show2" left color="green darken-2">Left side
    </v-snackbar>
    <v-snackbar app v-model="show3" centered elevation="4" timeout="8000">
      Screen center, disappear after 8 seconds
    </v-snackbar>
  </v-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Sample extends Vue {
  show1 = false;
  show2 = false;
  show3 = false;
  showAlert(): void {
    this.show1 = true;
  }

  showToast(): void {
    this.show2 = true;
    this.show3 = true;
  }

  tipHandler(): void {
    console.log("Tippy");
  }
}
</script>

70-slots.vue

<template>
  <div class="pa-4">
    <v-btn @click="doWork" :loading="working" class="mx-3">Click Me
      <template v-slot:loader>
        {{count}}
      </template>
    </v-btn>
    <v-btn @click="doWork" :loading="working" class="mx-3">Click Me
    </v-btn>
    <v-btn @click="doWork" :loading="working" class="mx-3">Click Me
      <template v-slot:loader>
        <v-progress-linear indeterminate></v-progress-linear>
      </template>
    </v-btn>
  </div>
</template>
<style>
.v-row {
  max-width: 300px;
}
</style>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Sample extends Vue {
  working = false;
  count = 5;
  timer: number | undefined = undefined;

  doWork(): void {
    this.working = true;
    this.count = 5;
    this.timer = setInterval(() => {
      this.count--;
      if (this.count == 0) {
        this.working = false;
        clearInterval(this.timer);
      }
    }, 1000);
  }
}
</script>

80-list.vue

<template>
  <div>
    <span class="text-h4">Lists</span>
    <div>Selected: {{selectedIndex}}</div>
    <v-container fluid>
      <v-row justify="space-around">
        <v-col>
          <v-subheader><span class="text-h5">One line with
              divider</span>
          </v-subheader>
          <v-sheet elevation="8" class="pa-5">
            <v-list shaped class="ma-4" color="blue lighten-4" rounded>
              <v-list-item-group v-model="selectedIndex">
                <template v-for="k in 5">
                  <v-list-item :key="k">
                    <v-list-item-content>Item {{k}}</v-list-item-content>
                  </v-list-item>
                  <v-divider :key="`d${k}`"></v-divider>
                </template>
              </v-list-item-group>
            </v-list>
          </v-sheet>
        </v-col>
        <v-col>
          <v-subheader><span class="text-h5">3-line items with action
              icons</span>
          </v-subheader>
          <v-sheet elevation="8" class="pa-5">
            Action: {{act}}
            <v-list shaped class="ma-4" color="green lighten-4" three-line>
              <v-list-item-group v-model="selectedIndex">
                <v-list-item v-for="k in 5" :key="k">
                  <v-list-item-avatar>
                    <v-icon>mdi-firebase</v-icon>
                  </v-list-item-avatar>
                  <v-list-item-content>
                    <v-list-item-title>Main text for item {{k}}
                    </v-list-item-title>
                    <v-list-item-subtitle>A longer descriptive text for
                      item {{k}}
                    </v-list-item-subtitle>
                  </v-list-item-content>
                  <v-list-item-action>
                    <v-icon @click="usdAction(k-1)">mdi-currency-usd
                    </v-icon>
                    <v-icon @click="euroAction(k-1)">mdi-currency-eur
                    </v-icon>
                  </v-list-item-action>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-sheet>
        </v-col>

      </v-row>
    </v-container>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Sample extends Vue {
  selectedIndex = -1;
  act = "";

  usdAction(pos: number): void {
    this.act = `Dollar on row ${pos}`;
  }
  euroAction(pos: number): void {
    this.act = `Euro on row ${pos}`;
  }
}
</script>