vuetifyjs / vuetifyjs/vuetify

[Feature Request] Add duration Prop to Automatically Dismiss v-alert

Open
#20,409 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue T: enhancement T: feature
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Problem to solve

Currently, v-alert components remain visible until manually dismissed, requiring developers to implement a setTimeout() to hide the alert after a certain period. This can lead to repetitive code.

Proposed solution

Introduce a duration prop to the v-alert component. This prop accepts a number representing the duration (in milliseconds) for which the alert should remain visible before automatically closing
usage example :

<v-alert :duration="5000" text=" This alert will automatically close after 5 seconds."/>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the v-alert component and inspect its existing visibility and manual-dismiss behavior. Add the proposed duration option so an alert closes after the specified milliseconds, then verify the behavior with the component's existing tests or a focused reproduction using the provided 5000 ms example.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.