Category: Vue

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Vertical Steppers

We can make the stepper display vertically.

For example, we can write:

<template>
  <v-stepper v-model="step" vertical>
    <v-stepper-step :complete="step > 1" step="1">
      Select an app
      <small>Summarize if needed</small>
    </v-stepper-step>

    <v-stepper-content step="1">
      <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
      <v-btn color="primary" @click="step = 2">Continue</v-btn>
      <v-btn text>Cancel</v-btn>
    </v-stepper-content>

    <v-stepper-step :complete="step > 2" step="2">Configure keywords</v-stepper-step>

    <v-stepper-content step="2">
      <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
      <v-btn color="primary" @click="step = 3">Continue</v-btn>
      <v-btn text>Cancel</v-btn>
    </v-stepper-content>

    <v-stepper-step :complete="step > 3" step="3">Select ad unit</v-stepper-step>

    <v-stepper-content step="3">
      <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
      <v-btn color="primary" @click="step = 4">Continue</v-btn>
      <v-btn text>Cancel</v-btn>
    </v-stepper-content>
  </v-stepper>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    step: 1,
  }),
};
</script>

The v-stepper-step is added above the v-stepper-content to display the step title above the content.

Linear Steppers

We can make a linear stepper to move users through each step sequentially:

<template>
  <div>
    <v-stepper>
      <v-stepper-header>
        <v-stepper-step step="1" complete>Select keywords</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2" complete>Create an ad group</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">Create an ad</v-stepper-step>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the complete prop so that users can’t go back to that step.

Non-Linear Steppers

To make steps editable, we can add the editable prop:

<template>
  <div>
    <v-stepper>
      <v-stepper-header>
        <v-stepper-step step="1" editable>Select keywords</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2" editable>Create an ad group</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">Create an ad</v-stepper-step>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The editable prop lets users click on the step.

Alternate Labels

We can place text below the step icon with the alt-labels prop:

<template>
  <div>
    <v-stepper alt-labels>
      <v-stepper-header>
        <v-stepper-step step="1">Select keywords</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2">Create an ad group</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">Create an ad</v-stepper-step>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Multi-line Error State

We can add an error state with the rules prop:

<template>
  <div>
    <v-stepper alt-labels>
      <v-stepper-header>
        <v-stepper-step step="1">Select keywords</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2" :rules="[() => false]">
          Create an ad group
          <small>Alert message</small>
        </v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">Create an ad</v-stepper-step>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the rules prop that has an array of functions that returns false to display an error state.

The step text will be red.

Conclusion

We can configure our stepper to do with rules and various props.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Ratings

The v-rating component lets us add a star rating input to our app.

To use it, we can write:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" small></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

The v-model has the rating value.

background-color has the fill color.

color has the outline color.

small makes the stars extra small.

We can also set the size to large , x-large , and the size prop.

The size prop lets us set the stars to any size value in pixels.

Custom Length

We can change the number of stars to display.

To do that, we use the length prop:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" :length="10"></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4,
  }),
};
</script>

We set length to 10, so we see 10 stars displayed.

Incremented

We can add full icons, half icons, or empty icons.

For example, we can write:

<template>
  <div>
    <v-rating v-model="rating" background-color="purple lighten-3" color="purple" half-increments></v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
};
</script>

The half-increments prop lets us add half stars.

So when we set rating to 4.5, we’ll see 4.5 stars.

Slots

We can populate the star slots to customize the stars as we wish.

For example, we can write:

<template>
  <div class="text-center">
    <v-rating v-model="rating">
      <template v-slot:item="props">
        <v-icon
          :color="props.isFilled ? genColor(props.index) : 'grey lighten-1'"
          large
          @click="props.click"
        >{{ props.isFilled ? 'mdi-star-circle' : 'mdi-circle-outline' }}</v-icon>
      </template>
    </v-rating>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    colors: ["green", "purple", "orange", "indigo", "red"],
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

We have the isFilled property from the slot props to determine whether the star should be filled or not.

The click method can be passed into the @click directive as the click handler.

This way, when we click it, we’ll see the value displayed with the stars.

We have different colors from different stars by returning the color name from the genColor method.

Card Ratings

We can put a v-rating component on a card.

For example, we can write:

<template>
  <v-card class="mx-auto elevation-20" color="purple" dark style="max-width: 400px;">
    <v-row justify="space-between">
      <v-col cols="8">
        <v-card-title>
          <div>
            <div class="headline">Song</div>
          </div>
        </v-card-title>
      </v-col>
      <v-col cols="4">
        <v-img
          class="shrink ma-2"
          contain
          height="125px"
          src="https://randomuser.me/api/portraits/women/68.jpg"
          style="flex-basis: 125px"
        ></v-img>
      </v-col>
    </v-row>
    <v-divider dark></v-divider>
    <v-card-actions class="pa-4">
      Rate this album
      <v-spacer></v-spacer>
      <span class="grey--text text--lighten-2 caption mr-2">({{ rating }})</span>
      <v-rating
        v-model="rating"
        background-color="white"
        color="yellow accent-4"
        dense
        half-increments
        hover
        size="18"
      ></v-rating>
    </v-card-actions>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    rating: 4.5,
  }),
  methods: {
    genColor(i) {
      return this.colors[i];
    },
  },
};
</script>

We put the v-rating component in the v-card-actions to make it show at the bottom of the card.

Conclusion

We can add the v-rating component to let us add a star rating input to our app.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Sparklines and Dashboard Card

We can put our sparkline in a card.

For example, we can write:

<template>
  <v-card class="mt-4 mx-auto" max-width="400">
    <v-sheet
      class="v-sheet--offset mx-auto"
      color="cyan"
      elevation="12"
      max-width="calc(100% - 32px)"
    >
      <v-sparkline :labels="labels" :value="value" color="white" line-width="2" padding="16"></v-sparkline>
    </v-sheet>

    <v-card-text class="pt-0">
      <div class="title font-weight-light mb-2">User Registrations</div>
    </v-card-text>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    labels: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
    value: [0, 2, 5, 9, 5, 10, 3, 5],
  }),
};
</script>

We add the v-sheet to act as the container for the v-sparkline .

The v-card-text goes below the sparkline.

The color of the v-sheet is displayed as the background color of the card.

Custom Labels

The labels can be customized by populating the label slot.

For example, we can write:

<template>
  <v-card class="mx-auto text-center" color="green" dark max-width="600">
    <v-card-text>
      <v-sheet color="rgba(0, 0, 0, .12)">
        <v-sparkline
          :value="value"
          color="rgba(255, 255, 255, .7)"
          height="100"
          padding="24"
          stroke-linecap="round"
          smooth
        >
          <template v-slot:label="item">${{ item.value }}</template>
        </v-sparkline>
      </v-sheet>
    </v-card-text>

    <v-card-text>
      <div class="display-1 font-weight-thin">Sales Last 24h</div>
    </v-card-text>
  </v-card>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    value: [423, 450, 480, 510, 590, 610, 760],
  }),
};
</script>

We populate the label slot with our own content.

The item variable has the entry of the value array.

Steppers

We can display progress through numbered steps with the v-stepper component.

For example, we can write:

<template>
  <v-stepper>
    <v-stepper-header>
      <v-stepper-step complete editable step="1">Select keywords</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step complete step="2">Create ad group</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step step="3" editable>Create ad</v-stepper-step>
    </v-stepper-header>
  </v-stepper>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We add the v-stepper component to add the steps for our stepper component.

The v-stepper-step has the steps.

v-divider space the steps out with lines.

Non-Editable Steps

We can make steps non-editable with the complete prop.

For example, we can write:

<template>
  <v-stepper value="2">
    <v-stepper-header>
      <v-stepper-step step="1" complete>Select keywords</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step step="2">Create an ad group</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step step="3">Create an ad</v-stepper-step>
    </v-stepper-header>
  </v-stepper>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Optional Steps

We can add text to indicate that a step is optional:

<template>
  <v-stepper value="2">
    <v-stepper-header>
      <v-stepper-step step="1" complete>Select keywords</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step step="2">
        Create an ad group
        <small>Optional</small>
      </v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step step="3">Create an ad</v-stepper-step>
    </v-stepper-header>
  </v-stepper>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The small element will be placed below the main text.

Conclusion

We can add sparklines to cards and steppers to display steps.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Snackbar Timeout

We can add a timeout prop to our snackbar to change when it closes automatically:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine" :timeout="3000">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit.",
  }),
};
</script>

The timeout is in milliseconds.

Vertical Snackbar

We can make a snackbar vertical with the vertical property.

For example, we can write:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine" vertical>
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit.",
  }),
};
</script>

Now the Close button will be displayed below the text.

Variants

Snackbars have different variants. We can add the text , shaped , or outlined props to change the snackbar variant.

For example, we can write:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine" rounded="pill">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit.",
  }),
};
</script>

We added the rounded prop with value pill to make the corners rounded.

Sparklines

A sparkline is a small graph that we can display.

We can add a sparkline with the v-sparkline component:

<template>
  <v-container fluid>
    <v-sparkline
      :fill="fill"
      :gradient="gradient"
      :line-width="width"
      :padding="padding"
      :smooth="radius || false"
      :value="value"
      auto-draw
    ></v-sparkline>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    gradient: ["red", "orange", "yellow"],
    padding: 8,
    radius: 10,
    value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
    width: 2,
  }),
};
</script>

We have the gradient prop with the color of the gradient of the graph.

The value prop has the values for the y-coordinates of the line.

line-width is the width of the line.

padding is the padding of the graph.

smooth is the border radius of the line.

All the lengths are in pixels.

Conclusion

We can add a sparkline to display a graph.

Snaackbars have various options we can change.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Sheets

We can use the v-sheets component to add containers for content in our app.

For example, we can write:

<template>
  <v-container>
    <v-row justify="space-around">
      <v-col v-for="elevation in elevations" :key="elevation" cols="12" md="4">
        <v-sheet class="pa-12" color="grey lighten-3">
          <v-sheet :elevation="elevation" class="mx-auto" height="100" width="100"></v-sheet>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    elevations: [12, 24],
  }),
};
</script>

to add our sheets with various levels of shadows.

Tile

The tile property makes the sheet rectangular:

<template>
  <v-container>
    <v-row justify="space-around">
      <v-col>
        <v-sheet class="pa-12" color="grey lighten-3">
          <v-sheet tile class="mx-auto" height="100" width="100"></v-sheet>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Colors and Sizes

We can change the color and size of the sheet.

For example, we can write:

<template>
  <v-container>
    <v-row class="flex-child">
      <v-col class="d-flex" cols="12">
        <v-sheet class="d-flex" color="grey lighten-3" height="100">
          <sheet-footer>lorem ipsum</sheet-footer>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a sheet with a gray background and height 100px.

Skeleton Loaders

The v-skeleton-loader component lets us provide an indication that something is loading.

For example, we can use it by writing:

<template>
  <v-container class="grey">
    <v-row justify="center">
      <v-col class="mb-12" cols="12" md="4">
        <v-skeleton-loader
          :loading="loading"
          :transition="transition"
          height="94"
          type="list-item-two-line"
        >
          <v-card>
            <v-card-title>Title</v-card-title>
            <v-card-text>Card Text</v-card-text>
          </v-card>
        </v-skeleton-loader>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    loading: true,
    transition: "scale-transition",
  }),
};
</script>

We have the v-skeleton-loader component to add the skeleton loader.

The loading prop can be set to loading state.

And transition is the name of the transition we want to show.

Snackbars

A snackbar lets us show a message to the user.

Snackbars can be positioned and the delay can be removed.

To add it, we add the v-snackbar component:

<template>
  <div class="text-center">
    <v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>

    <v-snackbar v-model="snackbar" :multi-line="multiLine">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    multiLine: true,
    snackbar: false,
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit. I",
  }),
};
</script>

We have the v-snackbar component which is triggered by the v-btn .

The snackbar state controls the open state of the snackbar.

In the v-snackbar , we pass in the attrs to the props of the v-btn so that it can be used as a snackbar button.

We set snackbar to false when we click it so that it can be closed.

The multi-line prop makes it display text in multiple lines.

Conclusion

We can use sheets as container for content.

Snackbars let us display messages.

Skeleton loaders are useful for displaying a loading indicator.