I want to create snackbars as shown in this example (vuetify 2). My question is how can i do it in vuetify 3.

https://codepen.io/scp-nm/pen/LYpBeoe?editors=1010

App.vue

<v-snackbar v-model="snackbar.visible" auto-height :color="snackbar.color" :multi-line="snackbar.mode === 'multi-line'" :timeout="snackbar.timeout" :top="snackbar.position === 'top'" > <v-layout align-center pr-4> <v-icon class="pr-3" dark large>{{ snackbar.icon }}</v-icon> <v-layout column> <div> <strong>{{ snackbar.title }}</strong> </div> <div>{{ snackbar.text }}</div> </v-layout> </v-layout> <v-btn v-if="snackbar.timeout === 0" icon @click="snackbar.visible = false" > <v-icon>clear</v-icon> </v-btn> </v-snackbar> 

When i convert the vue 2 code to vue 3, transitions does not work and vuetify 3 api not clear as i expected.

Here is my code workspace

1 Answer

As mentioned your sandbox isn't working so probably easier just share a quick example as I completely understand where you are with the migration but this fairly simple example will set you on your way!

Template:

<v-snackbar :timeout="timeout" v-model="show" > {{ message }} <template v-slot:actions > <v-btn variant="text" @click="show=false" > Close </v-btn> </template> </v-snackbar> 

Script:

 data() { return { show: false, message: '', timeout: 3000, } }, methods: { handleSnackbar() { this.message = 'This is a snackbar!' this.show = true; }, } 

Example: https://codepen.io/alexpetergill/pen/KKxGYXx/6f787eea03f27fcf290b4b938cbd11c5

UPDATE: Transitions don't appear to work, maybe this WIP (like a lot of stuff!). You can fudged this yourself with a bit of custom CSS. I've updated the Codepen, it works but the CSS isn't particular nice! You also need the eager prop to have the snackbar rendered.

<v-snackbar :timeout="timeout" v-model="show" :location="location" transition="slide-y-transition" // not working eager > 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobm5wYWWBd32OoaawZaSkeqS%2BxJqrnmWjo66kt8GaqaxlmaN6t8HEraCfsV1o