Question
VAlert closable prop and variant defaults change Vuetify 2 to Vuetify 3
Ari Dey
0 reputation · 07 Jul 2020, 14:12 UTC
149.5K views1
Loading…
0 reputation · 07 Jul 2020, 14:12 UTC
A design goal is to use VAlert as the inline, persistent alert surface in a Vue 3 application with Vuetify 3 while keeping transient notification noise low. The intent is to reserve VSnackbar for transient notifications and keep VAlert for contextual, non-auto-dismissing feedback.
The context involves a configuration transition from Vuetify 2 to Vuetify 3. The alert API surface changed, including the rename of the dismissible prop to closable and changes to slot usage for dismiss behavior. Variant styling and CSS variable theming also changed across Vuetify 3 minor releases, affecting visual weight without code changes. Filled variants increase prominence and risk noise for non-critical messages.
With version-sensitive prop names and shifting defaults, a clear decision point remains on how to define quiet, useful alerts and maintain a boundary between VAlert and global snackbar usage.
Which variant and type combination is documented as the quiet default for non-critical inline feedback in the current Vuetify 3 VAlert? Does closable true preserve the same slot behavior as Vuetify 2 dismissible for custom close content? What policy signals separate VAlert usage from VSnackbar during a Vuetify 2 to Vuetify 3 migration?
32275 reputation · 07 Jul 2020, 18:11 UTC
For non-critical inline feedback in Vuetify 3, the variant="tonal" combined with the appropriate type (such as info or success) is the documented approach for a "quiet" default. This provides a soft background color with lower visual weight than the filled or elevated variants, reducing notification noise while remaining visible.
The closable prop from Vuetify 2 does not preserve the same behavior in Vuetify 3. In the transition to version 3, the boolean closable prop was removed. To implement a dismissible alert, you must now manually handle the closing logic using the append slot.
Unlike Vuetify 2, where dismissible automatically rendered a close icon and handled the removal of the component, Vuetify 3 requires a explicit button and a state variable (e.g., v-if) to remove the alert from the DOM.
vuetify<v-alert
variant="tonal"
type="info"
v-if="showAlert"
>
This is a quiet inline alert.
<template v-slot:append>
<v-btn
icon="mdi-close"
variant="text"
@click="showAlert = false"
/>
</template>
</v-alert>To maintain a clean boundary between persistent feedback and transient notifications during migration, adopt the following policy signals:
variant="tonal" or variant="outlined" to ensure they do not compete with primary page actions.To verify your implementation in a Vuetify 3 environment:
closable to a v-alert; confirm that no close icon appears and no console error is thrown (as it is treated as an unknown attribute).variant="tonal" against variant="filled" to ensure the visual prominence matches your design goal for "quiet" feedback.Note: Please specify if you are using a custom theme override, as CSS variable changes in Vuetify 3.x may alter the perceived "quietness" of the tonal variant.
Use comments to ask for clarification. Post a solution as an answer.
32,275 reputation · 08 Jul 2020, 00:39 UTC
One correction worth flagging for anyone following the migration path: closable was not removed in Vuetify 3 — it is the renamed replacement for Vuetify 2's dismissible prop. Setting closable renders a built-in close icon and emits click:close, so you still control visibility with v-model or v-if, but you do not need a hand-rolled button in the append slot for the common case.
Where the append-slot approach in the earlier answer still applies is custom close content — if you need a labeled button or different icon, you handle the close event yourself and place your control in a slot. That is the real behavioral difference from Vuetify 2, not the absence of the prop.
On the quiet-default question, verify against your installed minor version: variant="tonal" and variant="outlined" have both been treated as low-prominence options, and variant styling shifted across Vuetify 3 minor releases. Pin the version, declare type explicitly, and snapshot the rendered output in a visual test before rolling the migration out.