How to Use the Vuetify Snackbar Component

Last updated on May 05, 2022
How to Use the Vuetify Snackbar Component

A snackbar helps to display quick messages. We can use it to notify users of certain events that occur in an app (for example, deleting an item from a list). It might also contain actions related to the information shown that users can take. In this article, we're going to learn how to create a snackbar using the Vuetify framework.

The Vuetify Snackbar Component

We can create a snackbar in Vuetify using the v-snackbar component. In the code below, we create a "Close" button in the action slot of the snackbar. When this button is clicked, the snackbar variable is set to false to hide the snackbar.

<template>
  <v-app>
    <div class="text-center ma-2">
      <v-btn @click="snackbar = true"> Open Snackbar </v-btn>
      <v-snackbar v-model="snackbar">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn text v-bind="attrs" @click="snackbar = false"> Close </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'You opened the snackbar!',
  }),
};
</script>

snackbar is false by default, so at first we can only see the button that opens the snackbar:

The snackbar is currently hidden.

Clicking on the button sets snackbar to true, which displays the snackbar component:

Clicking the button displays the snackbar.

Multi line Snackbars in Vuetify

With the multi-line prop, we can increase the height of the v-snackbar component to make some room for more content.

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

      <v-snackbar v-model="snackbar" multi-line>
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="red" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'This is a multiline snackbar',
  }),
};
</script>

Snackbar Timeouts in Vuetify

The timeout prop allows us to customize the delay before the snackbar is hidden:

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

      <v-snackbar v-model="snackbar">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,

    text: 'This snackbar has a timeout of 3000.',
  }),
};
</script>

Vuetify Snackbar Shaped Variant

We can create the shaped snackbar variant with the shaped prop:

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

      <v-snackbar v-model="snackbar" shaped>
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating shaped snackbars in Vuetify

Rounded Snackbars in Vuetify

Setting the rounded prop to true on a snackbar will make it rounded:

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

      <v-snackbar v-model="snackbar" rounded="pill">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn color="green" text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating a rounded snackbar with Vuetify.

Snackbar Elevation in Vuetify

We can increase the degree of elevation on a snackbar with the elevation prop. Here, we've set it to 24:

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

      <v-snackbar v-model="snackbar" color="blue" elevation="24">
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn dark text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Customizing snackbar elevation in Vuetify.

Vuetify Snackbar Tile Variant

Setting the tile prop on the snackbar removes the default border radius:

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

      <v-snackbar v-model="snackbar" color="red accent-2" tile>
        {{ text }}

        <template v-slot:action="{ attrs }">
          <v-btn dark text v-bind="attrs" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating a tile snackbar with Vuetify.

Vuetify Snackbar Text Variant

Vuetify also provides the text prop for using the snackbar's text variant:

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

      <v-snackbar v-model="snackbar" color="indigo" text>
        {{ text }}
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Creating a snackbar with the text variant with Vuetify.

Vuetify Snackbar Outlined Variant

We can activate the outlined variant on the Vuetify snackbar component with the outlined prop:

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

      <v-snackbar v-model="snackbar" color="primary" outlined>
        {{ text }}
      </v-snackbar>
    </div>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    snackbar: false,
    text: 'Welcome to Coding Beauty!',
  }),
};
</script>
Use the Vuetify snackbar outlined variant

Summary

Vuetify provides the v-snackbar component for creating snackbars, along with various customization options and variants.

See also