Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify Toast Snackbar Demo

In this tutorial, we'll create a Vuetify toast snackbar that displays a message for 10 seconds. We'll walk through the code you provided to understand how it works and demonstrate its functionality.

written

reviewed

updated

Vuetify Show Toast for 10 Seconds

  <div id="app">
        <v-app>
            <v-container>
                <h3>Vuetify Show Toast for 10 Seconds</h3>
                <v-snackbar v-model="snackbar" :timeout="10000">
                    {{ snackbarText }}
                    <template v-slot:actions>
                        <v-btn color="blue" variant="text" @click="snackbar = false">
                            Close
                        </v-btn>
                    </template>
                </v-snackbar>
                <v-btn @click="showSnackbar" color="success">Show Toast for 10 Seconds</v-btn>
            </v-container>
        </v-app>
    </div>
 <script type="module">
        const { createApp } = Vue;
        const { createVuetify } = Vuetify;
        const vuetify = createVuetify();
        const app = createApp({
            data() {
                return {
                    snackbar: false,
                    snackbarText: 'My timeout is set to 10000',
                };
            },
            methods: {
                showSnackbar() {
                    this.snackbar = true;
                },
            },
        }).use(vuetify).mount('#app'); // Mount the app to the #app element
 </script>

Run

Code Explanation

Let's break down the code

<div id="app">
  <v-app>
    <v-container>
      <h3>Vuetify Show Toast for 10 Seconds</h3>
      <v-snackbar v-model="snackbar" :timeout="10000">
        {{ snackbarText }}
        <template v-slot:actions>
          <v-btn color="blue" variant="text" @click="snackbar = false">
            Close
          </v-btn>
        </template>
      </v-snackbar>
      <v-btn @click="showSnackbar" color="success">Show Toast for 10 Seconds</v-btn>
    </v-container>
  </v-app>
</div>

The v-app and v-container elements are part of Vuetify's layout structure.
The v-snackbar component is used to display the toast message. Its v-model is bound to the snackbar data property, controlling its visibility.
The :timeout="10000" attribute sets the timeout for the snackbar to 10 seconds.
Inside the snackbar, {{ snackbarText }} is used to display the text.
The v-btn element is used to close the snackbar when clicked, setting snackbar to false.
Another v-btn triggers the showSnackbar method when clicked

<script type="module">
  const { createApp } = Vue;
  const { createVuetify } = Vuetify;
  const vuetify = createVuetify();

  const app = createApp({
    data() {
      return {
        snackbar: false,
        snackbarText: 'My timeout is set to 10000',
      };
    },
    methods: {
      showSnackbar() {
        this.snackbar = true;
      },
    },
  }).use(vuetify).mount('#app');
</script>

We use Vue.js to create the app.
data contains the snackbar property to control the snackbar's visibility and snackbarText for the message.
The showSnackbar method sets snackbar to true, displaying the snackbar.
We use Vuetify to enhance the app's UI.
Finally, we mount the app to the HTML element with the ID "app."

Conclusion

With this code, when you click the "Show Toast for 10 Seconds" button, the snackbar appears with the message "My timeout is set to 10000." It will automatically disappear after 10 seconds.

This Vuetify toast snackbar is a useful UI component for displaying temporary messages or notifications in your Vue.js applications

Output of Vuetify Toast Notification

Pasted Image