How to create snackbars in vuetify 3?

Question

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

Answer 1

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
>