Vuetify — Snackbars and Sparklines

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.